Font Awesome. Una raccolta di icone per stilizzare il tuo sito

Un modo molto comodo e veloce per inserire una icona nel nome di una voce di menu, nel titolo o in qualsiasi altro punto del vostro sito è usare CSS e la sua proprieta content.
Spesso capita di dover accedere a questa soluzione anche perché un nome del titolo per esempio nel menu accompagnato dalla rispettiva icona permette di concepire meglio il significato.

Concetto delle icone nel font Font Awesome

Sicuramente avete visto delle icone che evidenziano vari paragrafi anche sul nostro sito, rendendo piu intuitiva la lettura del articolo. Per introdurerre queste icone abimo usato un fon speciale dova a posto delle lettere ci sono dei disegni vettoriali che posiamo cambiare come un semplice caratteri cio è cambiare altezza e  colore.
Uno di questi font è Font Awesome.  E nel parchetto di installazione di Joomla  ne abbiamo un altro che si chiama Icon Moon che abbiamo gia toccato in uno dei articoli.
Qui ti spiegherò come utilizzare Font Awesome con aiuto di  proprietà content e i suoi inseparabili amici prseudo classi :before e :after

Font Awesome è gratuito   e come avevo gai adetto sono dei disegni vettoriali che è il punto chiave di questo tipo di icone, perché con aumento di grandezza non cambia la sua qualita come disegno. Questo font viene correttamente visualizzato da tutti i browser piu diffusi

Il progetto è molto vivo, costantemente si aggiungono le  nuove icone che non può che gioire. Al momento della scrittura del post la raccolta contiene 479 icone.
Vediamo subito un esempio

  • Prima
  • Foto
  • Posta
  • Musika
  • Risata
  • Dopo
  • Foto
  • Posta
  • Musica
  • Risata

Vediamo anche il codice del nostro menu senza le icone per adesso.

<ul>
<li>Prima</li>
<li>Foto </li>
<li>Posta</li>
<li>Musika</li>
<li>Risata</li>
</ul>

E gli stili CSS

<style>
.prova1 ul {
margin-top: 50px;
}
.prova1 ul li {
background-color: #ccc;
border-bottom: 1px solid #333;
color: #333;
cursor: pointer;
list-style: outside none none;
padding: 5px 10px;
width: 150px;
}
.prova1 ul li:hover{
background-color: red;
color: #fff;}
</style>

Ora vediamo come si aggiungono le icone.

Prima di tutto bobiamo scaricare Font Awesome dalla pagina del progetto. E collegiamo font tramite CSS al nostro progetto

@font-face {
  font-family: 'fa'; /* Questo nome useremo per rivolgersi a questo font*/
  src: url('fonts/fontawesome-webfont.eot');
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/fontawesome-webfont.woff') format('woff'),
       url('fonts/fontawesome-webfont.ttf') format('truetype'),
       url('fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Oppure potrai usare un altra soluzione per collegare font awesome alla tua pagina o sito web cosi come descritto qui

Ora posiamo agiungere le icone alla nostre voci del menu  Per fare questo, dovresti andare sulla  pagina con icona, scegliere quelle necessarie,

vybor ikonki

ed indicarli nelle proprietà del classe, ci interessa il valore delle icone espresso in unicode

unicod

Vediamo ora il nostro codice

<style>
li:before {       /*<--Posizioniamo le icone ->*/
  font-family: fa;
  padding-right: 7px;
}
.foto:before{    /* Voce  "foto" */
  content: "\f030";
}
.posta:before{    /* Voce "Posta" */
  content: "\f0e0";
}
.musica:before{    /* Voce "Мmusica" */
  content: "\f001";
}
.risata:before{    /* Voce "risata" */
  content: "\f118";
}
</style>
<ul>
<li>Dopo</li>
<li class="foto">Foto </li>
<li class="posta">Posta</li>
<li class="musica">Musica</li>
<li class="risata">Risata</li>
</ul>

E il risultato

  • Dopo
  • Foto
  • Posta
  • Musica
  • Risata

Le possibilità di utilizzo vista la quantità delle icone sicuramente non mancheranno.

Letto 315 volte