Categorie
CSS Web development

Icone HTML: come inserirle nella tua pagina web

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.

Icone HTML: quale tags utilizzare

Per inserire delle icone nella tua pagina web esistono diverse opzioni.

Nella lista seguente riporto le opzioni più diffuse:

  1. Utilizzo del tag <i>
  2. Uso del tag <svg>
  3. Impostazione di classe CSS relativa ad un’icona
  4. 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.

Font Awesome

Ecco il link per utilizzare Font Awesome.

Font Awesome: alcuni esempi

Font Awesome può essere incluso nella propria applicazione in diversi modi.

Eccone alcuni:

  1. Utilizzando un kit
  2. Utilizzando un package manager (npm / yarn / …)
  3. Tramite Web Fonts (docs)
  4. 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.

Remix Icon

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.

Bootstrap Icons

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.

material icons

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.

Icone HTML: approfondimenti

Se questo articolo è stato di tuo interesse, puoi consultarne altri relativi al CSS ed al Web development.

Eccone alcuni:

Icone HTML: conclusioni

In questo articolo hai avuto modo di scoprire come disegnare le icone nella tua applicazione web.