Visual Dicas

quarta-feira, 31 de agosto de 2016

Visual Dicas

Ícones gratuitos para sites - Font Awsome (bibliotecas tipo “font icons”)

Posted: 30 Aug 2016 04:55 PM PDT

Bibliotecas de ícones tipo "font icons"

Existem várias bibliotecas de ícones disponíveis na internet. Pesquisando, encontramos 3 bibliotecas "font icons" fantásticas, gratuitas, customizáveis e que podem ser facilmente adicionadas no seu site ou blog. Estamos falando das modernas bibliotecas: Font Awsome, Bootstrap e Google Material Design.

Font icons: Bibliotecas que exibem ícones como se fossem caracteres comuns.

Neste artigo mostraremos como instalar a biblioteca de ícones Font Awsome em blogs nas plataformas Blogger, Wordpress.org, Joomla e sites em geral. A biblioteca Font Awsome conta atualmente com mais de 630 ícones divididos em várias categorias. Vale a pena conhecer!

Carregando a biblioteca Font Awsome no seu site

Para adicionar a biblioteca você deverá copiar e colar o código abaixo no seu site ou blog:

Código de instalação da biblioteca

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

Você deverá inserir o código acima individualmente em cada postagem (utilizando um editor HTML) ou em cada página onde se deseja exibir um ícone da biblioteca.

Entretanto, se você pretende utilizar ícones em todo o seu site, poderá adicionar a biblioteca Font Awsome diretamente no documento principal. Assim, o código carregará os "font icons" e todos os estilos CSS da biblioteca, possibilitando a exibição dos ícones customizáveis em qualquer parte do site.

Adicionando o código no documento principal do site

Blogger

O Blogger não permite que você cole o código de instalação na página HTML (em Modelo - Editar HTML). Portanto, teremos que inserir o código em um novo gadget tipo HTML/JavaScript .

Em Layout, clique em [+ Adicionar um Gadget].

Abra um gadget tipo HTML/JavaScript.

Cole o código de instalação em Conteúdo e clique no botão [Salvar].

Obs.:

Não coloque título no gadget.

O gadget poderá ficar posicionado em qualquer local do layout.

Para desinstalar a biblioteca, basta excluir o gadget.

Wordpress (wordpress.org)

No menu lateral do painel do Wordpress, selecione Aparência e clique em [Editor].

Na coluna direita procure o arquivo header.php. Clique no link [Cabeçalho do tema] para abrir o arquivo no editor.

Cole o código de instalação imediatamente antes da tag de fechamento </head>. Clique no botão [Atualizar Arquivo]. Para desinstalar a biblioteca, basta excluir a linha de código que foi incluído.

Joomla

No painel do Joomla, acesse Extensões >> Temas >> Temas. Depois clique no link [Detalhes e Arquivos] do "template" que você está utilizando no seu site.

Clique em [index.php].

Cole o código de instalação imediatamente antes da tag de fechamento </head>. Clique no botão [Salvar]. Para desinstalar a biblioteca, basta excluir a linha de código que foi incluído.

Sites em Geral

Para sites em geral, usando um IDE, basta colocar a linha do código de instalação dentro do bloco <head> </head> do arquivo principal index, ou em qualquer página onde você irá exibir os ícones da biblioteca.

Usando a biblioteca Font Awsome

Para exibir os ícones desejados, após ter inserido a linha de código para carregar a biblioteca Font Awsome, basta utilizar o bloco de tags  com as respectivas classes de cada ícone.

Para você encontrar a classe dos ícones, acesse o link http://fontawesome.io/icons/.

Clique sobre o ícone desejado. No exemplo abaixo, vamos escolher o ícone "envira".

No nosso exemplo, a classe do ícone será "fa-envira".

Acrescente o prefixo "fa" antes da classe do ícone, definido a classe CSS padrão do mesmo. Veja no nosso exemplo a seguir, o código para exibir o ícone "envira". Digite utilizando o editor HTML do seu blog.

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

Veja abaixo como ficou o nosso exemplo.

Veja outros exemplos a seguir:

Observe que podemos customizar os ícones com estilos CSS (tamanho, cor, sombras, etc)

Uma dos recursos mais legais da biblioteca Font Awsome é variedade de classes CSS já prontas para customização dos ícones. Estas classes facilitam muito a vida dos programadores e web designers. Mas isto mostraremos no próximo artigo…