Ícones

Utilização (Icon Web Font)

Os ícones estão disponíveis em vários formatos e são adequados para diferentes tipos de projetos e plataformas, para programadores em seus aplicativos e para designers em suas maquetas ou protótipos.

Disponibilizamos 361 ícones via Font Awesome v3.2.1 - Licenciamento Aberto.
Veja aqui todos os ícones disponíveis.

Como usar os ícones: 
1. Copiar todo o directório font-awesome para o seu projeto.
2. Incluir na parte <head> de seu código HTML a referência à localização do seu font-awesome.min.css.

Código
Ocultar Código
  • HTML

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Icon Web Font
Font Awesome

3. Após fazer a implementação do recurso, para usar os ícones deve usar a tag <i> mais a classe com o nome do ícone pretendido (icon-beaker). No entento aconselhamos a incorporar a tag <span> para uma melhor utilização dos ícones.

Veja os exemplos abaixo:

  icon-beaker
 
  icon-info-sign
  icon-trash
 
  icon-rss
Código
Ocultar Código
  • HTML
  • CSS

<div class="icons-wrapper"> 
    <div class="row-fluid">
        <div class="span6"> 
            <i class="icon-beaker">&nbsp;</i> <span>icon-beaker</span>
        </div> 
        <div class="span6"> 
            <i class="icon-info-sign">&nbsp;</i> <span>icon-info-sign</span>
        </div> 
    </div> 
    <div class="row-fluid"> 
        <div class="span6"> 
            <i class="icon-trash">&nbsp;</i> <span>icon-trash</span>
        </div> 
        <div class="span6"> 
            <i class="icon-rss">&nbsp;</i> <span>icon-rss</span>
        </div> 
    </div> 
</div>

.icons-wrapper .span6{
    background: rgba(52,152,219,0.1);
    padding: 10px 15px;
    margin-bottom: 13px;
}
.icons-wrapper .span6 i{    
    font-size: 0px;
    margin-right: 25px;    
    height: auto;
    width: auto;
}
.icons-wrapper .span6 i:before{
    font-size: 36px;
    line-height: normal;
}
.icons-wrapper .span6 i,
.icons-wrapper .span6 span{
    vertical-align: middle;
}

Tamanhos

Para alterar o tamanho do ícone basta modificar o tamanho da fonte (font-size), o mesmo se passa quanto à cor, sombra ou qualquer outro elemento que seja herdado usando a folha de estilos (CSS).


No entanto poderá aumentar o tamanho dos ícones em relação ao seu container, usando as classes icon-large (aumento de 33%), icon-2x, icon-3x ou icon-4x.

Veja os exemplos abaixo:

  icon-beaker
  icon-beaker icon-large
  icon-beaker icon-2x
  icon-beaker icon-3x
  icon-beaker icon-4x
Código
Ocultar Código
  • HTML
  • CSS

<div class="icons-wrapper sizes-wrapper">
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-beaker">&nbsp;</i> <span>icon-beaker</span>
        </div>
        <div class="span6">
            <i class="icon-beaker icon-large">&nbsp;</i> <span>icon-beaker icon-large</span>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-beaker icon-2x">&nbsp;</i> <span>icon-beaker icon-2x</span>
        </div>
        <div class="span6">
            <i class="icon-beaker icon-3x">&nbsp;</i> <span>icon-beaker icon-3x</span>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-beaker icon-4x">&nbsp;</i> <span>icon-beaker icon-4x</span>
        </div>
    </div>
</div>

.icons-wrapper .span6{
    background: rgba(52,152,219,0.1);
    padding: 10px 15px;
    margin-bottom: 13px;
}
.icons-wrapper .span6 i{    
    font-size: 0px;
    margin-right: 25px;    
    height: auto;
    width: auto;
}
.icons-wrapper .span6 i:before{
    font-size: 36px;
    line-height: normal;
}
.icons-wrapper .span6 i,
.icons-wrapper .span6 span{
    vertical-align: middle;
}
.icons-wrapper.sizes-wrapper i{
    font-size: 0px;
}
.icons-wrapper.sizes-wrapper i:before{
    font-size: 20px;
}
.icons-wrapper.sizes-wrapper i.icon-large:before{
    font-size: 26px;
}
.icons-wrapper.sizes-wrapper i.icon-2x:before{
    font-size: 40px;
}
.icons-wrapper.sizes-wrapper i.icon-3x:before{
    font-size: 60px;
}
.icons-wrapper.sizes-wrapper i.icon-4x:before{
    font-size: 80px;
}

Use a classe icon-fixed-width para definir ícones com uma largura fixa. Especialmente útil para elementos como listas de navegação.

  •   Menu 1
  •   Menu 2
  •   Menu 3
  •   Menu 4
Código
Ocultar Código
  • HTML
  • CSS

<div class="icons-wrapper fixedwidth-wrapper">
    <div class="row-fluid">
        <div class="span6">
            <ul>
                <li>
                    <i class="icon-beaker icon-fixed-width">&nbsp;</i> <span>Menu 1</span>
                </li>
                <li>
                    <i class="icon-home icon-fixed-width">&nbsp;</i> <span>Menu 2</span>
                </li>
                <li>
                    <i class="icon-globe icon-fixed-width">&nbsp;</i> <span>Menu 3</span>
                </li>
                <li>
                    <i class="icon-rocket icon-fixed-width">&nbsp;</i> <span>Menu 4</span>
                </li>
            </ul>            
        </div>
    </div>
</div>

.icons-wrapper .span6{
    background: rgba(52,152,219,0.1);
    padding: 10px 15px;
    margin-bottom: 13px;
}
.icons-wrapper .span6 i{    
    font-size: 0px;
    margin-right: 25px;    
    height: auto;
    width: auto;
}
.icons-wrapper .span6 i:before{
    font-size: 36px;
    line-height: normal;
}
.icons-wrapper .span6 i,
.icons-wrapper .span6 span{
    vertical-align: middle;
}
.icons-wrapper.fixedwidth-wrapper li{
    border-bottom: 1px solid #808184;
    padding: 13px 5px;
}
.icons-wrapper.fixedwidth-wrapper .row-fluid{
    background: rgba(52,152,219,0.1);
}
.icons-wrapper.fixedwidth-wrapper .row-fluid .span6{
    background: transparent;
}
.icons-wrapper.fixedwidth-wrapper i:before{
    font-size: 20px;
}

Use a classe icon-li para substituir fácilmente os bullets de default nos componentes de lista.

  •   Lista 1
  •   Lista 2
  •   Lista 3
  •   Lista 4
Código
Ocultar Código
  • HTML
  • CSS

<div class="icons-wrapper fixedwidth-wrapper li-wrapper">
    <div class="row-fluid">
        <div class="span6">
            <ul>
                <li>
                    <i class="icon-beaker icon-li">&nbsp;</i> <span>Menu 1</span>
                </li>
                <li>
                    <i class="icon-home icon-li">&nbsp;</i> <span>Menu 2</span>
                </li>
                <li>
                    <i class="icon-globe icon-li">&nbsp;</i> <span>Menu 3</span>
                </li>
                <li>
                    <i class="icon-rocket icon-li">&nbsp;</i> <span>Menu 4</span>
                </li>
            </ul>            
        </div>
    </div>
</div>

.icons-wrapper .span6{
    background: rgba(52,152,219,0.1);
    padding: 10px 15px;
    margin-bottom: 13px;
}
.icons-wrapper .span6 i{    
    font-size: 0px;
    margin-right: 25px;    
    height: auto;
    width: auto;
}
.icons-wrapper .span6 i:before{
    font-size: 36px;
    line-height: normal;
}
.icons-wrapper .span6 i,
.icons-wrapper .span6 span{
    vertical-align: middle;
}
/*Icones fixed width*/
.icons-wrapper.fixedwidth-wrapper li{
    border-bottom: 1px solid #808184;
    padding: 13px 5px;
}
.icons-wrapper.fixedwidth-wrapper .row-fluid{
    background: rgba(52,152,219,0.1);
}
.icons-wrapper.fixedwidth-wrapper .row-fluid .span6{
    background: transparent;
}
.icons-wrapper.fixedwidth-wrapper i:before{
    font-size: 20px;
}
.icons-wrapper.fixedwidth-wrapper .span6 i{
    margin-right: 15px;
}
.icons-wrapper.fixedwidth-wrapper.li-wrapper li{
    border-bottom: 0px;
    padding: 10px 5px;
}

Propriedades

Poderá usar propriedades pré-definidas nos ícones, tais como rotação, sobreposição, espelho.

Veja os exemplos abaixo:

Use as classes icon-rotate-(ângulo) e icon-flip-(horizontal ou vertical):

  icon-text-height
  icon-text-height icon-rotate-90
  icon-text-height icon-rotate-180
  icon-text-height icon-rotate-270
  icon-text-height icon-flip-horizontal
  icon-text-height icon-flip-vertical
Código
Ocultar Código
  • HTML
  • CSS

<div class="icons-wrapper  properties-wrapper">
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-text-height">&nbsp;</i> <span>icon-text-height</span>
        </div>
        <div class="span6">
            <i class="icon-text-height icon-rotate-90">&nbsp;</i> <span>icon-text-height icon-rotate-90</span>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-text-height icon-rotate-180">&nbsp;</i> <span>icon-text-height icon-rotate-180</span>
        </div>
        <div class="span6">
            <i class="icon-text-height icon-rotate-270">&nbsp;</i> <span>icon-text-height icon-rotate-270</span>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-text-height icon-flip-horizontal">&nbsp;</i> <span>icon-text-height icon-flip-horizontal</span>
        </div>
        <div class="span6">
            <i class="icon-text-height icon-flip-vertical">&nbsp;</i> <span>icon-text-height icon-flip-vertical</span>
        </div>
    </div>
</div>

.icons-wrapper .span6{
    background: rgba(52,152,219,0.1);
    padding: 10px 15px;
    margin-bottom: 13px;
}
.icons-wrapper .span6 i{    
    font-size: 0px;
    margin-right: 25px;    
    height: auto;
    width: auto;
}
.icons-wrapper .span6 i:before{
    font-size: 36px;
    line-height: normal;
}
.icons-wrapper .span6 i,
.icons-wrapper .span6 span{
    vertical-align: middle;
}

.icons-wrapper.properties-wrapper .span6 span{
    display: inline-block;
    width: calc(100% - 65px);
}

Para sobrepor ícones, use a classe icon-stack para o ícone superior e a class icon-stack-base para o ícone inferior.

Veja os exemplos abaixo:

  icon-sun em icon-check-empty
  icon-sun em icon-circle
  icon-sun em icon-sign-blank
  icon-sun em icon-ban-circle
Código
Ocultar Código
  • HTML
  • CSS

<div class="icons-wrapper stacked">
<div class="row-fluid">
<div class="span6"><span class="icon-stack"><i class="icon-check-empty icon-stack-base">&nbsp;</i> <i class="icon-sun">&nbsp;</i> </span> <span>icon-sun em icon-check-empty</span></div>

<div class="span6"><span class="icon-stack"><i class="icon-circle icon-stack-base">&nbsp;</i> <i class="icon-sun">&nbsp;</i> </span> <span>icon-sun em icon-circle</span></div>
</div>

<div class="row-fluid">
<div class="span6"><span class="icon-stack"><i class="icon-sign-blank icon-stack-base">&nbsp;</i> <i class="icon-sun">&nbsp;</i> </span> <span>icon-sun em icon-sign-blank</span></div>

<div class="span6"><span class="icon-stack"><i class="icon-ban-circle icon-stack-base text-error">&nbsp;</i> <i class="icon-sun">&nbsp;</i> </span> <span>icon-sun em icon-ban-circle</span></div>
</div>
</div>

.icons-wrapper .span6{
    background: rgba(52,152,219,0.1);
    padding: 10px 15px;
    margin-bottom: 13px;
}
.icons-wrapper .span6 i{    
    font-size: 0px;
    margin-right: 25px;    
    height: auto;
    width: auto;
}
.icons-wrapper .span6 i:before{
    font-size: 36px;
    line-height: normal;
}
.icons-wrapper .span6 i,
.icons-wrapper .span6 span:not(.icon-stack){
    vertical-align: middle;
}

.icons-wrapper.stacked .span6 i:not(.icon-stack-base):before {
    font-size: 20px;
    position: relative;
    top: 4px;
}
.icons-wrapper.stacked .span6 i.icon-stack-base:before{
    font-size: 40px;
    height: 32px;
    line-height: 32px;
}
.icons-wrapper.stacked .span6 i:not(.icon-stack-base){
    font-size: 0px;
}
.icons-wrapper.stacked .span6 i.icon-circle + i,
.icons-wrapper.stacked .span6 i.icon-sign-blank + i{
    color: #fff;
}.icons-wrapper.stacked .span6 span:not(.icon-stack){
    margin-left: 15px;
    display: inline-block;
    width: calc(100% - 59px);
}