In questo articolo vedrai come inserire delle icone nel codice HTML che costituisce la tua pagina web.
Gli utenti infatti hanno molta familiarità con la rappresentazione di concetti ed aree dell’applicazione tramite icone.
Indice
Icone HTML: quale tags utilizzare
Per inserire delle icone nella tua pagina web esistono diverse opzioni.
Nella lista seguente riporto le opzioni più diffuse:
- Utilizzo del tag
<i> - Uso del tag
<svg> - Impostazione di classe CSS relativa ad un’icona
- Utilizzo del tag
<img>
Solitamente, i metodi 1 e 3 sono tipicamente utilizzati negli Icon packs.
Si tratta di collezione di icone già pronte per l’utilizzo, create per essere utilizzate nell’ambito dello sviluppo di software che necessita di interfaccia grafica.
Buona parte di questi set di icone sono installabili tramite npm.
Se non sai cosa sia npm o come installarlo sul tuo dispositivo, puoi consultare l’articolo Installare NPM: guida per Windows e Linux
Nel seguito dell’articolo riporterò gli icon packs più noti.
Icon packs noti
In questa sezione sono contenuti alcuni icon packs.
Ciascuno di questi è utilizzabile almeno in parte per i propri progetti senza dover pagare alcuna licenza.
Font Awesome
Font Awesome è forse uno dei set di icone più noti.
E’ stato rilasciato nel 2017 ed dispone di migliaia di icone liberamente utilizzabili.
Ecco il link per utilizzare Font Awesome.
Font Awesome: alcuni esempi
Font Awesome può essere incluso nella propria applicazione in diversi modi.
Eccone alcuni:
- Utilizzando un kit
- Utilizzando un package manager (npm / yarn / …)
- Tramite Web Fonts (docs)
- Tramite SVG + JavaScript (docs)
Dopo aver incluso quanto necessario nella propria applicazione, per poter disegnare un’icona è sufficiente utilizzare la classe CSS corrispondente all’icona desiderata.
<i class="fa-brands fa-facebook"></i>
Il codice riportato sopra disegna l’icona che rappresenta Facebook.
Remix Icon
Remix Icon è un set di icone open-source per sviluppatori e designers.
E’ composto da più di 2800 icone.
Questo icon pack può essere utilizzato gratuitamente sia per scopi personali che commerciali.
Qui puoi trovare il link al sito del progetto.
Bootstrap icons
Le icone di Bootstrap hanno un aspetto coerente con l’impostazione grafica del framework CSS.
Non sai cosa sia Bootstrap? Consulta l’articolo Bootstrap CSS: cosa è e come utilizzarlo.
Puoi utilizzare queste icone senza essere vincolato ad utilizzare il framework CSS.
Avrai a disposizione più di 2000 icone tra cui scegliere.
Per avere accesso a questo icon pack è sufficiente visitare il sito di Bootstrap Icons.
Material icons
Le Material Icons fanno parte del Material Design di Google.
Questo stile grafico è utilizzato nella maggior parte dei prodotti e servizi di Google.
Puoi accedere alle Material Icons tramite Google Fonts.
Se vuoi, puoi trovare ulteriori informazioni riguardo al Material Design nella pagina di Wikipedia dedicata all’argomento.
Guida all’installazione di Font Awesome
Considerata la sua popolarità, ho registrato un video che spiega due metodi per l’installazione di Font Awesome nella propria applicazione web.
Icone HTML: approfondimenti
Se questo articolo è stato di tuo interesse, puoi consultarne altri relativi al CSS ed al Web development.
Eccone alcuni:
- Promise JavaScript: definizione ed esempio pratico
- Selettori CSS: una guida pratica con esempi
- Selettori CSS WordPress: come utilizzarli
- document querySelector JavaScript: come utilizzarlo
- Come diventare sviluppatore web: guida completa
Icone HTML: conclusioni
In questo articolo hai avuto modo di scoprire come disegnare le icone nella tua applicazione web.
