Guia de aprendizado
Design responsívo: ícones da Font Awesome
Font Awesome fornecem ícones em forma de fontes de caractéres. Por padrão, a biblioteca sketch.css incorpora o arquivo de fontes externo da Font Awesome.
Para utilizar as os ícones da Font Awesome basta utilizar duas classes. A primeira classe, fa, define o escopo de um elemento que irá trabalhar com os recursos fornecidos pela biblioteca da Font Awesome. Cada ícone é antecedido pelo prefixo fa-, sendo que o próximo termo designa o seu nome.
Veja alguns exemplos:
<span class="fa fa-warning text-size-jumbo">
</span>
<span class="fa fa-lightbulb-o text-size-jumbo">
</span>
<span class="fa fa-thumbs-o-up text-size-jumbo">
</span>
<span class="fa fa-times text-size-jumbo">
</span>
<span class="fa fa-whatsapp text-size-jumbo">
</span>
<span class="fa fa-facebook-official text-size-jumbo">
</span>
<span class="fa fa-twitter text-size-jumbo">
</span>
<span class="fa fa-instagram text-size-jumbo">
</span>
<span class="fa fa-envelope text-size-jumbo">
</span>
<span class="fa fa-home text-size-jumbo">
</span>
<span class="fa fa-link text-size-jumbo">
</span>
Esse código irá produzir o seguinte resultado:
Boas práticas:
Antes de começar a utilizar os ícones da Font Awesome é interessante dar uma olhada em sua vasta biblioteca. Sendo assim, recomenda-se o leitor a visitar sua página oficial por meio link abaixo.
Para mais informações não deixe de consultar: http://fontawesome.io/icons/