CSS básico

Além do scaffolding, os elementos HTML básicos são estilizados e aprimorados com classes extensíveis para fornecer uma aparência nova e consistente.

Títulos e cópia do corpo

Escala tipográfica

Toda a grade tipográfica é baseada em duas variáveis ​​Less em nosso arquivo variables.less: @baseFontSizee @baseLineHeight. O primeiro é o tamanho da fonte base usado e o segundo é a altura da linha base.

Usamos essas variáveis ​​e um pouco de matemática para criar as margens, preenchimentos e alturas de linha de todos os nossos tipos e muito mais.

Texto do corpo do exemplo

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cópia do corpo do lead

Faça um parágrafo se destacar adicionando .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non comodo luctus.

h1. Cabeçallho 1

h2. Título 2

h3. Título 3

h4. Título 4

h5. Título 5
h6. Título 6

Ênfase, endereço e abreviatura

Elemento Uso Opcional
<strong> Para enfatizar um trecho de texto com Nenhum
<em> Para enfatizar um trecho de texto com estresse Nenhum
<abbr> Envolve abreviações e acrônimos para mostrar a versão expandida ao passar o mouse

Incluir atributo opcional titlepara texto expandido

Use .initialismclasse para abreviações em maiúsculas.
<address> Para obter informações de contato de seu ancestral mais próximo ou de todo o trabalho Preserve a formatação terminando todas as linhas com<br>

Usando ênfase

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: Sinta-se à vontade para usar <b>e <i>em HTML5, mas seu uso mudou um pouco. <b>destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>é principalmente para voz, termos técnicos, etc.

Endereços de exemplo

Aqui estão dois exemplos de como a <address>tag pode ser usada:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nome completo
[email protected]

Exemplos de abreviaturas

As abreviações com um titleatributo têm uma borda inferior pontilhada clara e um cursor de ajuda ao passar o mouse. Isso dá aos usuários uma indicação extra de que algo será mostrado ao passar o mouse.

Adicione a initialismclasse a uma abreviação para aumentar a harmonia tipográfica, dando a ela um tamanho de texto um pouco menor.

HTML é a melhor coisa desde o pão fatiado.

Uma abreviação da palavra atributo é attr .

Citações em bloco

Elemento Uso Opcional
<blockquote> Elemento em nível de bloco para citar conteúdo de outra fonte

Adicionar citeatributo para URL de origem

Use .pull-lefte .pull-rightclasses para opções flutuantes
<small> Elemento opcional para adicionar uma citação voltada para o usuário, normalmente um autor com título de trabalho Coloque o <cite>ao redor do título ou nome da fonte

Para incluir uma citação em bloco, envolva <blockquote>qualquer HTML como a citação. Para cotações diretas, recomendamos um <p>.

Inclua um <small>elemento opcional para citar sua fonte e você receberá um travessão &mdash;antes dele para fins de estilo.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  3. <small> Alguém famoso </small>
  4. </blockquote>

Exemplo de citações em bloco

As cotações de bloco padrão são estilizadas da seguinte forma:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Alguém famoso em Body of work

Para flutuar sua blockquote para a direita, adicione class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Alguém famoso em Body of work

Listas

Não ordenado

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem em massa
  • Facilisis em pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ultricies Purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Sem estilo

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem em massa
  • Facilisis em pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ultricies Purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Encomendado

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem em massa
  4. Facilisis em pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Descrição

<dl>

Listas de descrição
Uma lista de descrição é perfeita para definir termos.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
porta Malesuada
Etiam porta sem maleuada magna mollis euismod.

Descrição horizontal

<dl class="dl-horizontal">

Listas de descrição
Uma lista de descrição é perfeita para definir termos.
Euismod
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
porta Malesuada
Etiam porta sem maleuada magna mollis euismod.
Felis euismod sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Atenção! As listas de descrição horizontal truncarão termos muito longos para caber na coluna da esquerda text-overflow. Em viewports mais estreitas, eles mudarão para o layout empilhado padrão.

Em linha

Envolva trechos de código embutidos com <code>.

  1. Por exemplo , a seção < code> </ code > deve ser encapsulada como inline .

Bloco básico

Use <pre>para várias linhas de código. Certifique-se de escapar quaisquer colchetes angulares no código para renderização adequada.

<p>Exemplo de texto aqui...</p>
  1. <pré>
  2. <p>Exemplo de texto aqui...</p>
  3. </pre>

Nota: Certifique-se de manter o código dentro das <pre>tags o mais próximo possível da esquerda; ele irá renderizar todas as guias.

Opcionalmente, você pode adicionar a .pre-scrollableclasse que definirá uma altura máxima de 350px e fornecerá uma barra de rolagem do eixo y.

Google embelezar

Pegue o mesmo <pre>elemento e adicione duas classes opcionais para renderização aprimorada.

  1. <p> Texto de exemplo aqui... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>Exemplo de texto aqui...</p>
  4. </pre>

Baixe google-code-prettify e veja o leia-me de como usar.

Marcação de tabela

Marcação Descrição
<table> Elemento de encapsulamento para exibir dados em formato tabular
<thead> Elemento de contêiner para linhas de cabeçalho de tabela ( <tr>) para rotular colunas de tabela
<tbody> Elemento de contêiner para linhas de tabela ( <tr>) no corpo da tabela
<tr> Elemento de contêiner para um conjunto de células de tabela ( <td>ou <th>) que aparece em uma única linha
<td> Célula de tabela padrão
<th> Célula de tabela especial para rótulos de coluna (ou linha, dependendo do escopo e posicionamento)
Deve ser usado em um<thead>
<caption> Descrição ou resumo do que a tabela contém, especialmente útil para leitores de tela
  1. <tabela>
  2. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Opções de mesa

Nome Classe Descrição
Predefinição Nenhum Sem estilos, apenas colunas e linhas
Básico .table Apenas linhas horizontais entre as linhas
Delimitado .table-bordered Arredonda os cantos e adiciona borda externa
Faixa de zebra .table-striped Adiciona cor de fundo cinza claro a linhas ímpares (1, 3, 5, etc.)
Condensado .table-condensed Corta o preenchimento vertical pela metade, de 8px para 4px, dentro de todos tde thelementos

Tabelas de exemplo

1. Estilos de tabela padrão

As tabelas são estilizadas automaticamente com apenas algumas bordas para garantir a legibilidade e manter a estrutura. Com 2.0, a .tableclasse é obrigatória.

  1. < classe da tabela = "tabela" >
  2. </table>
# Primeiro nome Sobrenome Nome de usuário
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter

2. Mesa listrada

Fique um pouco extravagante com suas mesas adicionando listras de zebra - basta adicionar a .table-stripedclasse.

Nota: As tabelas distribuídas usam o :nth-childseletor CSS e não estão disponíveis no IE7-IE8.

  1. <table class = "table table-striped" >
  2. </table>
# Primeiro nome Sobrenome Nome de usuário
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter

3. Mesa com bordas

Adicione bordas ao redor de toda a mesa e cantos arredondados para fins estéticos.

  1. <table class = "table table-bordered" >
  2. </table>
# Primeiro nome Sobrenome Nome de usuário
1 Marca Otto @mdo
Marca Otto @getbootstrap
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter

4. Tabela condensada

Torne suas tabelas mais compactas adicionando a .table-condensedclasse para cortar o preenchimento das células da tabela pela metade (de 8px para 4px).

  1. <table class = "table table-condensed" >
  2. </table>
# Primeiro nome Sobrenome Nome de usuário
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter

5. Combine todos eles!

Sinta-se à vontade para combinar qualquer uma das classes de tabela para obter aparências diferentes, utilizando qualquer uma das classes disponíveis.

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Nome completo
# Primeiro nome Sobrenome Nome de usuário
1 Marca Otto @mdo
2 Jacó Thornton @gordo
3 Larry o pássaro @Twitter

HTML e CSS flexíveis

A melhor parte dos formulários no Bootstrap é que todas as suas entradas e controles ficam ótimas, não importa como você os construa em sua marcação. Nenhum HTML supérfluo é necessário, mas fornecemos os padrões para quem precisar.

Layouts mais complicados vêm com classes sucintas e escalonáveis ​​para facilitar o estilo e a vinculação de eventos, para que você tenha cobertura em todas as etapas.

Quatro layouts incluídos

Bootstrap vem com suporte para quatro tipos de layouts de formulário:

  • Vertical (padrão)
  • Procurar
  • Em linha
  • Horizontal

Diferentes tipos de layouts de formulário exigem algumas alterações na marcação, mas os próprios controles permanecem e se comportam da mesma forma.

Estados de controle e muito mais

Os formulários do Bootstrap incluem estilos para todos os controles de formulário básico, como entrada, área de texto e seleção que você esperaria. Mas também vem com vários componentes personalizados, como entradas anexadas e pré-anexadas e suporte para listas de caixas de seleção.

Estados como erro, aviso e sucesso são incluídos para cada tipo de controle de formulário. Também estão incluídos estilos para controles desabilitados.

Quatro tipos de formulários

Bootstrap fornece marcação e estilos simples para quatro estilos de formulários web comuns.

Nome Classe Descrição
Vertical (padrão) .form-vertical (não requerido) Rótulos empilhados alinhados à esquerda sobre controles
Em linha .form-inline Etiqueta alinhada à esquerda e controles de bloco em linha para estilo compacto
Procurar .form-search Entrada de texto extra-arredondada para uma estética de pesquisa típica
Horizontal .form-horizontal Flutuar rótulos alinhados à esquerda e à direita na mesma linha que os controles

Formulários de exemplo usando apenas controles de formulário, sem marcação extra

Forma básica

Padrões inteligentes e leves sem marcação extra.

Exemplo de texto de ajuda em nível de bloco aqui.

  1. <form class = "bem" >
  2. <label> Nome do rótulo </label>
  3. <input type = "texto" class = "span3" placeholder = "Digite algo..." >
  4. <span class = "help-block" > Exemplo de texto de ajuda em nível de bloco aqui. </span>
  5. < classe de etiqueta = "caixa de seleção" >
  6. <input type = "checkbox" > Confira
  7. </label>
  8. <button type = "submit" class = "btn" > Enviar </button>
  9. </form>

Formulário de pesquisa

Adicione .form-searchao formulário e .search-queryao input.

  1. <form class = "bem form-search" >
  2. <input type = "texto" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Pesquisar </button>
  4. </form>

Formulário embutido

Adicione .form-inlinepara refinar o alinhamento vertical e o espaçamento dos controles de formulário.

  1. <form class = "bem form-inline" >
  2. <input type = "texto" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Password" >
  4. < classe de etiqueta = "caixa de seleção" >
  5. <input type = "checkbox" > Lembrar de mim
  6. </label>
  7. <button type = "submit" class = "btn" > Entrar </button>
  8. </form>

Formas horizontais

São mostrados à direita todos os controles de formulário padrão que suportamos. Aqui está a lista com marcadores:

  • entradas de texto (texto, senha, e-mail, etc)
  • caixa de seleção
  • rádio
  • selecionar
  • seleção múltipla
  • entrada de arquivo
  • área de texto

Além do texto de forma livre, qualquer entrada baseada em texto HTML5 aparece assim.

Exemplo de marcação

Dado o layout de formulário de exemplo acima, aqui está a marcação associada à primeira entrada e ao grupo de controle. As classes , e são todas necessárias para o .control-groupestilo .control-label..controls

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Texto da legenda </legend>
  4. <div class = "grupo de controle" >
  5. <label class = "control-label" for = "input01" > Entrada de texto </label>
  6. <div class = "controles" >
  7. <input type = "texto" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Texto de ajuda de suporte </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

Estados de controle de formulário

O Bootstrap apresenta estilos para foco e disabledestados suportados pelo navegador. Removemos o Webkit padrão outlinee aplicamos um box-shadowem seu lugar para :focus.


Validação de formulário

Também inclui estilos de validação para erros, avisos e sucesso. Para usar, adicione a classe de erro ao arquivo .control-group.

  1. <conjunto de campos
  2. class = "erro do grupo de controle" >
  3. </fieldset>
Algum valor aqui
Algo pode ter dado errado
Corrija o erro
Woohoo!
Woohoo!

Estendendo controles de formulário

Prefixar e anexar entradas

Grupos de entrada — com texto anexado ou anexado — fornecem uma maneira fácil de fornecer mais contexto para suas entradas. Ótimos exemplos incluem o sinal @ para nomes de usuário do Twitter ou $ para finanças.


Caixas de seleção e rádios

Até a v1.4, o Bootstrap exigia marcação extra em torno de caixas de seleção e rádios para empilhá-los. Agora, é uma simples questão de repetir o <label class="checkbox">que envolve o <input type="checkbox">.

Caixas de seleção e rádios em linha também são suportados. Basta adicionar .inlinea qualquer .checkboxou .radioe pronto.


Formulários embutidos e anexar/anexar

Para usar entradas prefixadas ou anexadas em um formulário embutido, certifique-se de colocar .add-one inputna mesma linha, sem espaços.


Texto de ajuda do formulário

Para adicionar texto de ajuda para suas entradas de formulário, inclua texto de ajuda embutido <span class="help-inline">ou um bloco de texto de ajuda <p class="help-block">após o elemento de entrada.

Use as mesmas .span*classes do sistema de grade para tamanhos de entrada.

Você também pode usar classes estáticas que não mapeiam para a grade, adaptam-se aos estilos CSS responsivos ou consideram vários tipos de controles (por exemplo, inputvs. select).

@

Aqui está um texto de ajuda

0,00
Aqui está mais texto de ajuda
$ 0,00

Nota: Os rótulos cercam todas as opções para áreas de clique muito maiores e um formulário mais utilizável.

Botão classe="" Descrição
btn Botão cinza padrão com gradiente
btn btn-primary Fornece peso visual extra e identifica a ação principal em um conjunto de botões
btn btn-info Usado como uma alternativa aos estilos padrão
btn btn-success Indica uma ação bem-sucedida ou positiva
btn btn-warning Indica que deve ser tomado cuidado com esta ação
btn btn-danger Indica uma ação perigosa ou potencialmente negativa
btn btn-inverse Botão cinza escuro alternativo, não vinculado a uma ação ou uso semântico

Botões para ações

Como convenção, os botões devem ser usados ​​apenas para ações, enquanto os hiperlinks devem ser usados ​​para objetos. Por exemplo, "Download" deve ser um botão, enquanto "atividade recente" deve ser um link.

Estilos de botão podem ser aplicados a qualquer coisa com a .btnclasse aplicada. No entanto, normalmente você desejará aplicá-los apenas a elementos <a>e <button>.

Compatibilidade entre navegadores

O IE9 não corta gradientes de fundo em cantos arredondados, então o removemos. Relacionado, o IE9 altera buttonelementos desabilitados, tornando o texto cinza com uma sombra de texto desagradável que não podemos corrigir.

Vários tamanhos

Gosta de botões maiores ou menores? Adicione .btn-large, .btn-small, ou .btn-minipara dois tamanhos adicionais.


Estado desativado

Para botões desabilitados, adicione a .disabledclasse aos links e o disabledatributo aos <button>elementos.

Link principal Link

Atenção! Usamos .disabledcomo uma classe utilitária aqui, semelhante à .activeclasse comum, portanto, nenhum prefixo é necessário.

Uma aula, várias tags

Use a .btnclasse em um elemento <a>, <button>ou <input>.

Link
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. Botão
  4. </button>
  5. < classe de entrada = "btn" tipo = "botão"
  6. valor = "Entrada" >
  7. < classe de entrada = "btn" tipo = "enviar"
  8. valor = "Enviar" >

Como prática recomendada, tente corresponder o elemento ao seu contexto para garantir a renderização entre navegadores correspondente. Se você tiver um input, use um <input type="submit">para seu botão.

  • ícone de vidro
  • música-ícone
  • pesquisa de ícone
  • ícone-envelope
  • ícone-coração
  • ícone-estrela
  • ícone-estrela-vazio
  • usuário-ícone
  • filme-ícone
  • icon-th-large
  • ícone-th
  • icon-th-list
  • icon-ok
  • ícone-remover
  • ícone-zoom-in
  • ícone-zoom-out
  • ícone desligado
  • ícone-sinal
  • ícone-engrenagem
  • ícone-lixo
  • ícone-home
  • arquivo de ícone
  • hora do ícone
  • ícone-estrada
  • icon-download-alt
  • download de ícone
  • ícone-upload
  • caixa de entrada de ícones
  • ícone-play-círculo
  • ícone-repetir
  • atualização de ícone
  • icon-list-alt
  • ícone de bloqueio
  • ícone-bandeira
  • fones de ouvido ícone
  • ícone-volume-off
  • icon-volume-down
  • ícone de aumento de volume
  • icon-qrcode
  • ícone-código de barras
  • ícone-tag
  • tags de ícone
  • livro de ícones
  • ícone-marcador
  • impressão de ícone
  • ícone-câmera
  • fonte de ícone
  • ícone em negrito
  • ícone-itálico
  • altura-texto-ícone
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • lista de ícones
  • icon-indent-left
  • icon-indent-right
  • ícone-facetime-vídeo
  • icon-picture
  • ícone-lápis
  • ícone-mapa-marcador
  • ajuste de ícone
  • tom de ícone
  • editar ícone
  • compartilhar ícone
  • verificação de ícone
  • ícone-mover
  • icon-step-backward
  • ícone-retrocesso rápido
  • ícone para trás
  • jogo de ícones
  • ícone-pausa
  • ícone-parada
  • avanço de ícone
  • ícone-avanço rápido
  • icon-step-forward
  • ícone-ejetar
  • ícone-chevron-esquerda
  • icon-chevron-right
  • ícone-mais-sinal
  • sinal de menos-ícone
  • ícone-remover-sinal
  • icon-ok-sign
  • ícone-pergunta-sinal
  • icon-info-sign
  • captura de tela do ícone
  • ícone-remover-círculo
  • ícone-ok-círculo
  • ícone-ban-círculo
  • ícone-seta-esquerda
  • ícone-seta-direita
  • ícone-seta para cima
  • ícone-seta para baixo
  • icon-share-alt
  • ícone-resize-full
  • ícone-redimensionar-pequeno
  • ícone-mais
  • ícone-menos
  • ícone-asterisco
  • ícone-exclamação-sinal
  • ícone-presente
  • folha de ícone
  • ícone de fogo
  • ícone-olho-aberto
  • ícone-olho-fechado
  • ícone-aviso-sinal
  • plano-ícone
  • ícone-calendário
  • ícone aleatório
  • ícone-comentário
  • ícone-ímã
  • icon-chevron-up
  • icon-chevron-down
  • ícone-retuíte
  • ícone-carrinho de compras
  • icon-folder-close
  • ícone-pasta-abrir
  • ícone-redimensionar-vertical
  • icon-resize-horizontal
  • ícone-hdd
  • ícone do megafone
  • ícone-sino
  • ícone-certificado
  • ícone de polegar para cima
  • ícone de polegar para baixo
  • ícone-mão-direita
  • ícone-mão-esquerda
  • ícone de mão para cima
  • ícone de mão para baixo
  • ícone-círculo-seta-direita
  • ícone-círculo-seta-esquerda
  • ícone-círculo-seta para cima
  • ícone-círculo-seta para baixo
  • ícone-globo
  • chave de ícone
  • ícone-tarefas
  • filtro de ícone
  • ícone-pasta
  • ícone-tela cheia

Construído como um sprite

Em vez de tornar cada ícone uma solicitação extra, nós os compilamos em um sprite - um monte de imagens em um arquivo que usa CSS para posicionar as imagens com background-position. Este é o mesmo método que usamos no Twitter.com e funcionou bem para nós.

Todas as classes de ícones são prefixadas com .icon-namespace e escopo adequados, assim como nossos outros componentes. Isso ajudará a evitar conflitos com outras ferramentas.

A Glyphicons nos concedeu o uso do conjunto Halflings em nosso kit de ferramentas de código aberto, desde que forneçamos um link e crédito aqui nos documentos. Por favor, considere fazer o mesmo em seus projetos.

Como usar

Bootstrap usa uma <i>tag para todos os ícones, mas eles não têm classe de caso - apenas um prefixo compartilhado. Para usar, coloque o seguinte código em qualquer lugar:

  1. <i class = "icon-search" ></i>

Há também estilos disponíveis para ícones invertidos (brancos), prontos com uma classe extra:

  1. <i class = "icon-search icon-white" ></i>

Existem 140 classes para escolher para seus ícones. Basta adicionar uma <i>tag com as classes certas e pronto. Você pode encontrar a lista completa em sprites.less ou aqui neste documento.

Atenção! Ao usar ao lado de strings de texto, como em botões ou links de navegação, certifique-se de deixar um espaço após a <i>tag para espaçamento adequado.

Casos de uso

Ícones são ótimos, mas onde alguém os usaria? Aqui estão algumas ideias:

  • Como recursos visuais para sua navegação na barra lateral
  • Para uma navegação puramente orientada por ícones
  • Para botões para ajudar a transmitir o significado de uma ação
  • Com links para compartilhar contexto no destino de um usuário

Essencialmente, em qualquer lugar que você possa colocar uma <i>tag, você pode colocar um ícone.

Exemplos

Use-os em botões, grupos de botões para uma barra de ferramentas, navegação ou entradas de formulário pré-anexadas.