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

1 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?

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More