Ícones impressionantes de fontes

A biblioteca de ícones Font Awesome oferece 519 ícones vetoriais escaláveis gratuitos. Esta biblioteca é totalmente gratuita para uso pessoal e comercial. Projetados originalmente para Bootstrap, esses ícones podem ser personalizados facilmente.

Carregando a biblioteca de fontes

Para carregar a biblioteca Font Awesome, copie e cole a seguinte linha na seção <head> da página da web.

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

Usando o ícone

Font Awesome oferece vários ícones. Escolha um deles e adicione o nome da classe do ícone a qualquer elemento HTML dentro da tag <body>. No exemplo a seguir, usamos o ícone da moeda indiana.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Ele produzirá a seguinte saída -

Definindo o tamanho

Você pode aumentar ou diminuir o tamanho de um ícone definindo seu tamanho usando CSS e usando-o junto com o nome da classe, conforme mostrado abaixo. No exemplo dado, declaramos o tamanho como 6 em.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Ele produzirá a seguinte saída -

Definindo a cor

Assim como o tamanho, você pode definir a cor dos ícones usando CSS. O exemplo a seguir mostra como alterar a cor do ícone da moeda indiana.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Lista de categorias

Font Awesome oferece 519 ícones nas seguintes categorias -

Ícones de aplicativos da web
Ícones de mão
Ícones de transporte
Ícones de gênero
Ícones de tipo de arquivo
Ícones giratórios
Ícones de controle de formulário
Ícones de pagamento
Ícones de gráfico
Ícones de moeda
Ícones do editor de texto
Ícones direcionais
Ícones do player de vídeo
Ícones de marca

Para usar qualquer um desses ícones, você deve substituir o nome da classe nos programas fornecidos neste capítulo pelo nome da classe do ícone desejado. Nos próximos capítulos desta unidade (Font Awesome), explicamos em termos de categoria o uso e as respectivas saídas de vários ícones de Font Awesome.

↰ Previous page Next page ↱