Você está em:
// Acessorios para Blogs

Como usar a Font Awesome (com exemplos)

A Font Awesome é um conjunto de ícones altamente personalizável, que pode ser usada gratuitamente (mesmo para uso comercial). Para começar a usar a Font Awesome, basta adicionar 2 linhas de código nas suas páginas.
Atualmente, a Font Awesome disponibiliza mais de 600 ícones. A nossa primeira preocupação, foi o impacto que este recurso poderia ter na velocidade da página.
Nos nossos testes (usando a MaxCDN) a Font Awesome adicionou “apenas” 65.1KB, que foram carregados em 27ms (um dos elementos que carregou mais rápido). Uma agradável surpresa, tendo em conta as enormes potencialidades deste recurso.

Como usar a Font Awesome?

A Font Awesome permite introduzir os ícones desejados através das tags <i> ou <span>. Para começar, basta adicionar o código de incorporação na seção “<head>” das suas páginas. Atualmente, a Font Awesome é distribuído através de dois CDN de elevada qualidade (MaxCDN e CloudFare). Escolha qual o serviço que pretende usar nas suas páginas:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
OU
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Exemplos Font Awesome

Após a instalação, já poderá usar os ícones livremente. Para usar um determinado ícone, será necessário conhecer o “código” de identificação. Poderá consultar a lista completa aqui: Ícones Font Awesome.
Tal como já foi referido, os ícones são “chamados” usando a tag “i”. No entanto, podem ser personalizados como se fossem um tipo de letra (Fonte). Por exemplo:
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-official" style="font-size:48px;"></i>
<i class="fa fa-facebook-official" style="font-size:80px;color:#8b9dc3"></i>
Resultado:




Criar uma lista com o Font Awesome:
Os leitores adoram as listas, elas permitem uma melhor organização e visualização da informação. Dê outra vida às suas listas em HTML, usando ícones personalizados. Aqui fica um exemplo:
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Quadrado</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Lista de ícones</li> <li><i class="fa-li fa fa-square"></i>Lista de ícones</li> <li><i class="fa-li fa fa-hand-o-right"></i>Lista de ícones</li> <li><i class="fa-li fa fa-plus-square"></i>Lista de ícones</li> <li><i class="fa-li fa fa-arrow-circle-right"></i>Lista de ícones</li> <li><i class="fa-li fa fa-caret-right"></i>Lista de ícones</li> <li><i class="fa-li fa fa-star"></i>Lista de ícones</li> <li><i class="fa-li fa fa-chevron-right"></i>Lista de ícones</li> </ul>
Resultado:
  • Quadrado
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
  • Lista de ícones
Pretende um menu personalizado sem gastar dinheiro?
O Font Awesome também pode ser usado em menus CSS, proporcionando um aspecto bastante profissional. O método de funcionamento é exactamente igual, bastando usar os elementos <i> ou <span>.
como usar a font awesome menus
Caso tenha alguma dúvida, envie o seu comentário.

Nauan Alcântara

Sou um estudante de programação e amo designer gráfico, adoro mexer e personalizar conteúdos infográficos e tipográficos, adoro também passar qualquer conteúdo de informação para meus leitores e ajudar a processar qualquer tipo de ajuda ou material didático.

Nenhum comentário:

  • Postar um comentário

Por favor leia antes de Comentar

Navegue pelas postagens.