Í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

HTML

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

Icon Web Font

Font Awesome

DESCARREGAR

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

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

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

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

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

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

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);

}

Seleção Expansível

Tabelas

Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.

Caso pretenda saber mais, consulte a nossa política de privacidade.

Política de privacidade

Navegação

Ícones

Ícones

Utilização (Icon Web Font)

Tamanhos

Propriedades