Con Font Awesome possiamo inserire fantastiche icone all'interno del nostro progetto senza andare a ricrearle a mano, esportarle e reinserirle nel progetto web che stiamo sviluppando. Questo ci permette di non avere immagini di icone, che potrebbero appesantire un pò il progetto ma soprattutto può risparmiarci tanto tempo ed avere dei pacchetti di cone già pronte all’utilizzo senza tralasciare il fatto che si tratta di icone dal design moderno, pulito ed elegante.
Installare Font Awesome è semplicissimo, basta seguire questo link per poter installare l'ultima versione (Font Awesome 5) con la metodologia che si preferisce. Una volta installata la libreria è sufficiente utilizzare le icone in questo modo nel proprio HTML
<html>
<head>
<link href="css/all.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="top-header">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin"></i>
</div>
</body>
</html>
In uno dei nostri ultimi progetti abbiamo usato Font Awesome 5 come set di icone ma dovevamo necessariamente aggiungere una nuova icona non inclusa nella libreria standard di Font Awesome, il logo di DuckDuckGo
Dopo alcune ricerche abbiamo scoperto che Font Awesome consente di aggiungere icone personalizzate oltre a quanto offerto. Andiamo a vedere come estendere il set icone di Font Awesome 5 in 3 semplici passaggi mantenendo pulito il codice.
1) Prima di tutto crea una cartella chiamata myicons e aggiungi la definizione dell'icona all'interno di un file js (fa-duckduckgo.js in my case)
export const faDuckDuckGo = {
prefix: "fab",
iconName: "duckduckgo",
icon: [
24,
24,
[],
"e001",
"M12 0C5.373 0 0 ... .616.484z"
]
};
prefix e iconName sono rispettivamente il gruppo di icone di appartenenza (fab ovvero Font Awesome brands in questo caso) e il nome dell'icona, in modo da poter renderizzare l'icona in questo modo in HTML
<i class="fab fa-duckduckgo"></i>
la sezione icon contiene la viewbox della nostra SVG (24, 24 in questo caso), il codice unicode dell'icona (e001) e la single-path della SVG che contiene le formule per renderizzare l'immagine a video.
2) Crea un file index myicons/index.js per esportare le icone custom
export { faDuckDuckGo } from "./fa-duckduckgo";
3) Installa il package fontawesome-svg-core
yarn add @fortawesome/fontawesome-svg-core
Per rendere l'icona custom disponibile in Font Awesome ecco come fare:
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faDuckDuckGo } from "./myicons";
library.add(faDuckDuckGo);
dom.watch();
Nel codice sopra le icone personalizzate vengono importate dal modulo myicons creato precedentemente e poi aggiunte alla libreria di Font Awesome. Il metodo dom.watch controlla il DOM per eventuali icone aggiuntive aggiunte o modificate.
Di seguito potete trovare due demo una in JavaScript e una in TypeScript
