Ícones
- Home >
- Componentes >
- Ícones
Í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.
- HTML
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
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:
- HTML
- CSS
<div class="icons-wrapper">
<div class="row-fluid">
<div class="span6">
<i class="icon-beaker"> </i> <span>icon-beaker</span>
</div>
<div class="span6">
<i class="icon-info-sign"> </i> <span>icon-info-sign</span>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<i class="icon-trash"> </i> <span>icon-trash</span>
</div>
<div class="span6">
<i class="icon-rss"> </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:
- HTML
- CSS
<div class="icons-wrapper sizes-wrapper">
<div class="row-fluid">
<div class="span6">
<i class="icon-beaker"> </i> <span>icon-beaker</span>
</div>
<div class="span6">
<i class="icon-beaker icon-large"> </i> <span>icon-beaker icon-large</span>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<i class="icon-beaker icon-2x"> </i> <span>icon-beaker icon-2x</span>
</div>
<div class="span6">
<i class="icon-beaker icon-3x"> </i> <span>icon-beaker icon-3x</span>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<i class="icon-beaker icon-4x"> </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
- HTML
- CSS
<div class="icons-wrapper fixedwidth-wrapper">
<div class="row-fluid">
<div class="span6">
<ul>
<li>
<i class="icon-beaker icon-fixed-width"> </i> <span>Menu 1</span>
</li>
<li>
<i class="icon-home icon-fixed-width"> </i> <span>Menu 2</span>
</li>
<li>
<i class="icon-globe icon-fixed-width"> </i> <span>Menu 3</span>
</li>
<li>
<i class="icon-rocket icon-fixed-width"> </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
- 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"> </i> <span>Menu 1</span>
</li>
<li>
<i class="icon-home icon-li"> </i> <span>Menu 2</span>
</li>
<li>
<i class="icon-globe icon-li"> </i> <span>Menu 3</span>
</li>
<li>
<i class="icon-rocket icon-li"> </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):
- HTML
- CSS
<div class="icons-wrapper properties-wrapper">
<div class="row-fluid">
<div class="span6">
<i class="icon-text-height"> </i> <span>icon-text-height</span>
</div>
<div class="span6">
<i class="icon-text-height icon-rotate-90"> </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"> </i> <span>icon-text-height icon-rotate-180</span>
</div>
<div class="span6">
<i class="icon-text-height icon-rotate-270"> </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"> </i> <span>icon-text-height icon-flip-horizontal</span>
</div>
<div class="span6">
<i class="icon-text-height icon-flip-vertical"> </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:
- 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"> </i> <i class="icon-sun"> </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"> </i> <i class="icon-sun"> </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"> </i> <i class="icon-sun"> </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"> </i> <i class="icon-sun"> </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);
}
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.