Criar ícones com CSS3

Font Awesome é uma ferramenta gratuita, que serve para você adicionar ícones gerados com CSS3, no seu blog ou website. Caso você deseje melhorar o SEO da sua página na web, uma das primeiras providências a ser tomada, é trocar todos os ícones feitos com imagens por ícones gerados com CSS3! Parece mentira, mas, 20 ícones feitos com imagens, demoram muito mais tempo para carregar na página, do que uma imagem grande com 300 KB! Por isso, a melhor opção é substituir todos os ícones "comuns" do seu blog ou website, por ícones gerados com CSS3. Veja também, com criar botões com CSS3.

ícones css3 criar baixar
Imagem/Reprodução/Font Awesome.

Para adicionar ícones com CSS3 no seu blog ou website, não é necessário acrescentar um monte de códigos, com poucas linhas de código, você consegue um bom resultado! Para realizar este trabalho é necessário ter um mínimo de conhecimento em HTML e CSS.

Primeiro você deve adicionar esta linha de código, logo abaixo de "<head>", no código fonte do seu blog ou website:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Mais instruções e atualizações, você encontra lá no website Font Awesome, na seção "Get Started".

Para trocar os ícones do seu blog ou website, por ícones feitos em CSS3, basta acessar o website Font Awesome e escolher os ícones desejados. É necessário clicar no ícone, para pegar o código correspondente ao ícone. Cada ícone tem uma classe; por exemplo, a classe do ícone do HTML5 é:  <i class="fa fa-html5"></i> (essa é a parte para montar o HTML). Para controlar a cor do ícone, monte um CSS com isto: .fa-html5 {color:#f60 !important;}

Veja na imagem abaixo, eu montei um menu de barra lateral com alguns ícones coloridos; quando o usuário pousar o cursor do mouse sobre o texto, o texto muda de cor e, a cor de fundo também muda.

menu criar ícones css3

Para criar este exemplo, eu utilizei esse código (no lugar das cerquilhas "#", você adiciona os links) - se você quiser fazer testes, basta copiar o código abaixo (CSS + HTML):

<style>
a.list-group-item {color: #4c86f0; font-size: 23px;}
.list-group-item {position: relative;display: block;
padding: 10px 15px;margin-bottom: 1px;background-color: #eee;border: 1px solid #ddd;}
.list-group a:hover{color:#ddd; text-decoration: none !important;background:#333;}
.fa-thumbs-up {color:#060 !important;}
.fa-tag {color:#333 !important;}
.fa-pencil {color:#3b4 !important;}
.fa-lightbulb-o {color:#da0 !important;}
.fa-facebook-official {color:#3a5795 !important;}
.fa-android {color:#8bc349 !important;}
.fa-html5 {color:#f60 !important;}
.fa-css3 {color:#4c85f0 !important;}
.fa-twitter {color:#15c !important;}
.fa-cog {color:#000 !important;}
</style>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-tag"></i>&nbsp; Tags</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Pencil</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Gear</a>
  <a class="list-group-item" href="#"><i class="fa fa-thumbs-up"></i>&nbsp; Like</a>
  <a class="list-group-item" href="#"><i class="fa fa-lightbulb-o"></i>&nbsp; Lamp</a>
  <a class="list-group-item" href="#"><i class="fa fa-facebook-official"></i>&nbsp; Facebook</a>
  <a class="list-group-item" href="#"><i class="fa fa-android"></i>&nbsp; Android</a>
  <a class="list-group-item" href="#"><i class="fa fa-html5"></i>&nbsp; HTML5</a>
  <a class="list-group-item" href="#"><i class="fa fa-css3"></i>&nbsp; CSS3</a>
  <a class="list-group-item" href="#"><i class="fa fa-twitter"></i>&nbsp; Twitter</a>
</div>

É possível adicionar mais alguns comandos nos links:

<a class="list-group-item" href="#"  target="_blank" rel="nofollow"  title="Tags" ><i class="fa fa-tag"></i>&nbsp; Tags</a>

  • target="_blank"  - Abre o link em uma nova janela.
  • rel="nofollow"  - Diz aos rôbos de busca para não seguirem o link.
  • title="Tags" - Texto que aparece quando o usuário pousar o cursor do mouse sobre o link.

Nesse caso, eu criei um menu simples de barra lateral, mas, é possível criar diversas outras coisas - formulários de e-mail, caixa de pesquisa etc. No website Font Awesome, tem alguns exemplos e instruções (em inglês) para você começar a trabalhar no seu projeto. Os ícones funcionam apenas nos navegadores modernos - para obter suporte para o IE7, consulte a seção "Get Started" (veja o link de acesso, logo acima).
Postagem Anterior Próxima Postagem