Pubblicato il

icone

html

css

Ciao a tutti e benvenuti in questa guida su come includere le icone nel vostro codice HTML. Oggi vi mostrerò i passi principali per usare ed integrare icone .svg o .png nel vostro sito.

Le icone utilizzate all’interno di siti web, possono essere di due tipi: vettoriali o bitmap. Potete leggere le differenze tra i due tipi in questa guida.

Come includere icone nell’HTML usando immagini

Includere icone di tipo bitmap o immagini, nel vostro codice HTML, è molto semplice:


1)  Scaricare l’icona

Ci sono molti siti online da cui si possono scaricare icone in formato .png come: http://www.flaticon.com/ e  http://www.freepik.com/free-icons 


2) Salvare l’icona sul vostro server

L’icona che avete scaricato dovrà essere salvata in una cartella sul vostro server. Solitamente viene cerata una directory sul server apposta per le immagini, per esempio:

/static/immagini
index.html

3) Includere l’icona nel codice HTML
L’ultimo passo è includere l’icona scaricata nel codice HTML della pagina desiderata. Per le icone bitmap si può utilizzare un tag <img>
Per esempio se il vostro sito ha una struttura del genere:

static/immagini/icona.png
static/style.css
static/main.js
index.html


potete includere l’icona png, includendo questo tag in qualsiasi area della pagina:

<img src=”/static/immagini/icona.png”>

Come inserire icone svg nel vostro sito

Ora che abbiamo visto come utilizzare le icone bitmap nel vostro codice HTML, vediamo come fare la stessa cosa utilizzando le icone vettoriali. Le icone vettoriali possono essere inserite seguendo gli stessi passi per le icone bitmap, cambiando solamente il nome del file, ma in questa guida vi mostrerò un modo migliore e più facile per inserire icone vettoriali nel vostro codice HTML.

FontAwesome

FontAwesome è una raccolta gratuita di icone vettoriali che possono essere incluse nel vostro sito in pochissimi passi

1) Scaricare il pacchetto di icone

Per prima cosa navigate a questo indirizzo e scaricate il pacchetto di icone: http://fontawesome.io/get-started/

come utilizzare ed includere icone nel vostro sito HTML

Una volta scaricato il file .zip apritelo e copiate il file chiamato font-awesome.css nella directory del vostro sito (insieme ai vostri altri file .css)

2) importare le icone nel codice HTML 

Siccome le icone di FontAwesome sono incluse in un file .css, potete linkare questo file al vostro codice HTML come qualsiasi altro file CSS.
Per esempio:

<link rel="stylesheet" href="css/font-awesome.min.css">


3) Scegliere l’icona ed includerla nel sito

Ora che abbiamo collegato il file CSS di FontAwesome, al nostro codice HTML, possiamo accedere a tutte le icone di questo pacchetto utilizzando un solo tag <i>

Per vedere una lista dettagliata delle icone presenti in FontAwesome, basta navigare alla pagina: http://fontawesome.io/icons/
Una volta trovata l’icona che volete utilizzare, basta cliccare su di essa e il sito vi mostrerà il tag e la classe da utilizzare.
Per esempio:
come utilizzare icone png o svg nel mio sito html

Ora potete modificare se necessario l’icona utilizzano il codice CSS e la classe data da FontAwesome. 

Ora che vi ho mostrato due modi per includere le icone di tipo  bitmap o svg nel vostro codice HTML, siete pronti per personalizzare il vostro sito con icone di ogni genere.

Spero questa guida vi sia stata di aiuto. Se avete qualche domanda su come includere le icone nel vostro sito, commentate in basso e risponderò alle vostre domande 
Ci vediamo alla prossima

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews