PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

08/09/2016

Como utilizar a biblioteca Font Awsome - ícones gratuitos para sites e blogs (customização)

Como utilizar a biblioteca Font Awsome - Visual Dicas

O que é Font Awsome

Font Awsome é uma biblioteca de ícones tipo “font icons”, pois permite que os ícones do seu banco de dados sejam exibidos e tratados como se fossem caracteres comuns. O legal dessa biblioteca, que além da grande quantidade de ícones disponíveis gratuitamente e da facilidade de utilização, é a total liberdade de customização.

Como utilizar a biblioteca Font Awsome - Visual Dicas

Os ícones podem ser facilmente customizados através de estilos CSS padrão e/ou através classes pré preparadas. A biblioteca Font Awsome possui uma variedade de classes CSS já prontas para customização dos ícones. Estas classes facilitam muito a vida dos programadores e web designers, como mostraremos a seguir:

Usando a biblioteca Font Awsome no seu site

1) Para carregar a biblioteca, Insira a linha de código abaixo na seção <head></head> da página HTML do seu blog ou site.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Obs1.: Leia o post: Ícones gratuitos para sites - Font Awsome para saber como inserir o código no seu blog / site (Blogger, Wordpress, Joomla, e sites em geral).

2) Para visualizar todos ícones que você poderá inserir no seu site, acesse o link: http://fontawesome.io/icons/.

Como utilizar a biblioteca Font Awsome - Visual Dicas

3) Para definir a classe do ícone, utilize o prefixo fa” antes do nome do ícone. Por exemplo, vamos escolher o ícone “bars”. Portanto, a classe do nosso ícone ficará da seguinte forma: fa-bars.

Obs.: Se desejar, clique no ícone desejado para visualizar o nome da classe.

Como utilizar a biblioteca Font Awsome - Visual Dicas

Você então visualizará a classe do ícone. No nosso exemplo, ficará: fa-bars

Como utilizar a biblioteca Font Awsome - Visual Dicas

4) Para inserir o ícone padrão na página HTML ou em uma postagem, utilize o bloco de tags <i></i> com as respectivas classes de cada ícone.  Acrescente o prefixo “fa” antes da classe do ícone que definimos anteriormente. Veja no nosso exemplo a seguir, o código para exibir o ícone “bars” padrão.  Digite utilizando o editor HTML do seu blog.

<i class="fa fa-bars"> </i>

Veja como ficou o ícone padrão do nosso exemplo:

Obs.: Para visualizar ícones antes de inserí-los no seu site, utilize o editor de HTML: http://squids.com.br/editor/. Não esqueça de inserir o código de inicialização para carregar a biblioteca Font Awsome.

(Digite em Código Fonte e clique no botão [Enviar Código] para visualizar)

Como utilizar a biblioteca Font Awsome - Visual Dicas

Customizando ícones

Usando estilos CSS

Você poderá customizar seus ícones usando estilos CSS normalmente. Veja os exemplos abaixo:

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

</br><br/>

<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>

Visualização do nosso exemplo:



Classes de dimensões (Large icons)

A classe fa-lg aumenta 33% do ícone padrão. Depois as classes fa-2x, fa-3x, fa-4x ou fa-5x aumentam em vezes o ícone da classe fa-lg. Veja o exemplo abaixo:

<i class="fa fa-car"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

Veja como ficou o nosso exemplo:

Listas de ícones

As classes fa-ul e fa-li devem ser utilizadas para posicionar ícones ordenados por listas. Veja o exemplo a seguir:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-home"></i>Home</li>
  <li><i class="fa-li fa fa-book"></i>Biblioteca</li>
  <li><i class="fa-li fa fa-pencil"></i>Aplicações</li>
  <li><i class="fa-li fa fa-cog"></i>Configurações</li>
</ul>

Visualização do nosso exemplo:

  • Home
  • Biblioteca
  • Aplicações
  • Configurações

Ícones animados

A classe fa-spin gera um efeito de rotação e a classe fa-pulse um efeito de rotação intermitente para qualquer ícone da biblioteca.Veja os exemplos abaixo:

<p>Rotação - classe "fa-pin"</p>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-car fa-spin"></i>

<p>Rotação intermitente - classe "fa-pulse"</p>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-circle-o-notch fa-pulse"></i>
<i class="fa fa-refresh fa-pulse"></i>
<i class="fa fa-cog fa-pulse"></i>
<i class="fa fa-car fa-pulse"></i>

Visualização do exemplo:

Rotação - classe "fa-pin"

Rotação intermitente - classe "fa-pulse"

Rodar e virar ícones

As classes fa-rotate e fa-flip devem ser usadas para girar (rotate) ou virar (flip) qualquer ícone da biblioteca. Veja os exemplos a seguir:

<p>Usando rotate</p>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-rotate-90"></i>
<i class="fa fa-car fa-rotate-180"></i>
<i class="fa fa-car fa-rotate-270"></i>
<p>Usando flip - horizontal</p>
<i class="fa fa-hand-o-left"></i>
<i class="fa fa-hand-o-left fa-flip-horizontal"></i>
<p>Usando flip - vertical</p>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-flip-vertical"></i>

Visualizar o exemplo:

Usando rotate

Usando flip - horizontal

Usando flip - vertical

Sobreposição de ícones

Para sobrepor (empilhar) vários ícones da biblioteca, use a classe fa-stack. As classes fa-stack-1x e fa-stack-2x, mudam o tamanho dos ícones. Para inverter as cores, use a classe fa-inverse. Veja os exemplos a seguir:

<h3><strong>Sobreposição de ícons (padrão):</strong></h3>
<span class="fa-stack">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<br>

<span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<br>

<span class="fa-stack">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>


<h3>Usndo classe fa-lg (ícones maiores):</h3>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
Ícone do twitter sobre o ícone do círculo<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
ícone do twitter (inverse) sobre o ícone do círculo<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
sobreposição do ícone twitter sobre o ícone fa-ban

<h3>Usando classe fa-3x (ícones maiores):</h3>
<span class="fa-stack fa-3x">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<br>

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<br>

<span class="fa-stack fa-3x">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

Visualização do nosso exemplo:

Sobreposição de ícones (padrão):



Usndo classe fa-lg (ícones maiores):

Ícone do twitter sobre o ícone do círculo
ícone do twitter (inverse) sobre o ícone do círculo
sobreposição do ícone twitter sobre o ícone fa-ban

Usando classe fa-3x (ícones maiores):



Para saber mais e conhecer outras classes para customização dos ícones da biblioteca Font Awsome, clique no link: http://fontawesome.io/examples/

Testando ícones no Squids Editor

Para visualizar ícones antes de inserí-los no seu site, utilize o editor de HTML: http://squids.com.br/editor/. Não esqueça de inserir o código de inicialização para carregar a biblioteca Font Awsome.

(Digite em Código Fonte e clique no botão [Enviar Código] para visualizar)

Como utilizar a biblioteca Font Awsome - Visual Dicas

byALF

2 comentários:

Blogger disse...

Ever wanted to get free YouTube Subscribers?
Did you know that you can get these ON AUTO-PILOT AND TOTALLY FOR FREE by getting an account on Like 4 Like?

Sam Wichky disse...

Thanks , Over 10000 totally free vintage font styles are waiting for you to download, it's free and I have it installed on my device too.

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics