Simbolos e alternativas à pesada font-awesome

[ppKrauss]

Ao invés de carregar o arquivo font-awesome.min.css inteiro de bobeira, quando só precisamos de um ou dois símbolos, o melhor é colocar imagem inline ou gravar SVG num arquivo. Soluções:

• SVG com símbolos prontos de https://github.com/danklammer/bytesize-icons que podem ser usados inline ou gravados como arquibo hiper-leve SVG.
• Se vamos usar 3 ou mais síbolos, mais prático recompilar o arquivo de fonte, deixando ele mais leve. Ver discussão em Include only part of font-awesome, ou artigo/tutorial antigo sobre como otimizar a fonte.

---

Exemplo

O menu-symbol (hamburger), que seria um monstro com carga de arquivo font-awesome.min.css, para depois referir apenas uma vez como <i class="fa fa-bars"></i>, pode ser até inline:

<svg id="i-menu" xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor"
  stroke-linecap="miter" stroke-linejoin="miter" stroke-width="12%">
    <path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" />
</svg>

onde os atributos width, height, stroke-s podem ser ajustados livremente.

[ppKrauss]

Melhor ainda, https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg

Por exemplo o "comment" fica como

<svg width="60" height="60" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M1792 896q0 174-120 321.5t-326 233-450 85.5q-70 0-145-8-198 175-460 242-49 14-114 22-17 2-30.5-9t-17.5-29v-1q-3-4-0.5-12t2-10 4.5-9.5l6-9 7-8.5 8-9q7-8 31-34.5t34.5-38 31-39.5 32.5-51 27-59 26-76q-157-89-247.5-220t-90.5-281q0-130 71-248.5t191-204.5 286-136.5 348-50.5q244 0 450 85.5t326 233 120 321.5z"/>
</svg>

E já pode ser utilizado no footer para contato, linkando para https://dadosabertos.social/

Mais dicas:

• vertival align middle
• etc. em align-svg-icons-to-text-and-say-goodbye-to-font-icons