Font Awesome é uma fonte icônica gratuita projetada para uso com o Twitter Bootstrap para substituir o sprite Glyphicons. Ele ainda vem com ícones extras que você não terá com o Twitter Bootstrap!
Algumas vantagens de usar uma fonte de ícone em vez de um sprite de imagem são:
- Controle de CSS Defina facilmente a cor, o tamanho, a sombra do ícone e tudo o que for possível com CSS.
- Escalabilidade infinita Os gráficos vetoriais escaláveis significam que cada ícone parece incrível em qualquer tamanho.
- Perfeito em monitores de retina Fonte Ícones impressionantes são vetores, o que significa que eles são lindos em monitores de alta resolução.
Algumas vantagens extras:
- Uma fonte, 249 ícones Em uma única coleção, Font Awesome é uma linguagem pictográfica de ações relacionadas à web.
- Suporte para IE7: Font Awesome oferece suporte para IE7. Se você precisar, minhas condolências.
- Designer amigável Instale FontAwesome.otf e visite a página de copiar e colar . Feliz design.
- O Font Awesome compatível com o leitor de tela não atrapalha os leitores de tela, ao contrário de outras fontes de ícone.
Integração
É fácil integrar o Font Awesome no Twitter Bootstrap ou até mesmo usá-lo sozinho.
Use este método para integrar o Font Awesome com o CSS Bootstrap padrão.
- Copie o diretório de fontes Font Awesome em seu projeto.
- Copie font-awesome.min.css em seu projeto.
- Abra o font-awesome.min.css do seu projeto e edite os caminhos das fontes para garantir que apontem para o lugar certo. (O caminho da fonte é relativo ao seu diretório CSS.)
- No
<head>de seu html, faça referência ao local de seu font-awesome.min.css. <small> Sem os #s </small>
<#link rel="stylesheet" href="../css/bootstrap.min.css" />
<#link rel="stylesheet" href="../css/font-awesome.min.css" /></code></pre>
LESS, SASS, and other integration examples can be found on the Font Awesome Github Page.
Examples
Use Font Awesome icons in:
Bulleted lists
Buttons
Button groups
Navigation
Prepended form inputs
And many more with Custom CSS
Larger Icons
To increase the size of icons relative to its container, use icon-large (33% increase), icon-2x, icon-3x, or icon-4x.
<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Bordered & Pulled Icons
Use icon-border and pull-right or pull-left for easy pull quotes or article graphics.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together ... lots of new possibilities.
<i class="icon-flag icon-4x pull-left icon-border"></i>
Use a few of the new styles together ... lots of new possibilities.
More HTML examples can be found on the Font Awesome Github Page.