Lotrèk
21 Dicembre 2020

Utilizzare e customizzare Font Awesome


Andrea  profile image
Human:
Andrea 
Tempo
di lettura
5'

In questo tutorial vedremo come utilizzare e customizzare Font Awesome una delle migliori icon library open source.

Font Awesome è una delle migliori librerie di Icon Fonts presenti nel panorama open source, utilizzato da oltre 70 milioni di siti web. Le icone presenti in questa libreria, i font e il codice sorgente sono rispettivamente rilasciati sotto Creative Commons, SIL Open Font License e licenza MIT. 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

- Demo JavaScript

- Demo TypeScript

Vuoi saperne di più?

Iscriviti e riceverai gratuitamente sulla tua mail news, insight e report mensili sui trend del momento.

Registrandoti confermi di accettare la nostra privacy policy.


Condividi

Responsabile dello sviluppo, passo la mia vita tra i tasti meccanici e quelli della 6 corde. Quando parenti e amici non chiamano perchè "non gli va il computer" vado a caccia di birre e scatti interessanti.

Articoli Correlati

 Invio email in corso, yeah!
Richiesta inviata
Il tuo indirizzo email risulta già iscritto
C'è stato un problema riprova più tardi