Se você é desenvolvedor web com certeza já ouviu falar do Font Awesome. Ele é um projeto open source que fornece um pacote de ícones úteis para serem usados em páginas web.
Recentemente foi lançado a 5ª versão trazendo novos ícones, svg e uma melhora significativa nos ícones existentes nas versões anteriores.
Como incorporar o Font Awesome 5 em uma página HTML
É possível incorporar o Font Awesome 5 usando o CDN:
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
Você pode baixar o arquivo fornecido pelo CND e salvar no diretório do seu projeto.
Como usar os ícones do Font Awesome 5
Com o arquivo js inserido na sua página basta adicionar a tag com a class referente ao ícone. Por exemplo:
<i class="fas fa-camera-retro"></i>
É possível personalizar o ícone o deixando com uma aparência mais interessante. Exemplo:
<div style="font-size:3em; color:Tomato">
<i class="fas fa-camera-retro"></i>
</div>
Quando o navegador renderizar a página HTML, o Font Awesome 5 será apresentado no formato svg.
<svg class="svg-inline--fa fa-camera-retro fa-w-16" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="camera-retro" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"></path>
</svg>
O que é SVG?
Scalable Vector Graphics (SVG) é uma linguagem de marcação XML para descrever gráficos vetoriais bidimensionais.
SVG é similar em escopo à tecnologia Flash, propriedade da Adobe, mas se distingue por ser uma recomendação da W3C (ou seja, um padrão) e por ser baseado em XML, e não em um formato binário fechado.
Em outras palavras, o SVG enriquece ainda mais o Font Awesome.
Aumentando o tamanho dos ícones
O tamanho padrão do ícone é pequeno mas pode ser aumentado. Na versão 5, novas classes para aumentar o tamanho foram inclusas.
<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>
É muito simples incorporar e utilizar o Font Awesome 5 nas suas páginas. Se ainda não utilizou, faça um teste com os ícones tenho certeza que vá adotá-lo em algum projeto futuramente.