Utilizzare icone personalizzate nel tuo sito web WordPress

Utilizzare icone personalizzate nel tuo sito web WordPress

In un vecchio articolo avevo spiegato come creare un’icona personalizzata per il web tramite web font, usando Adobe Illustrator ed IcoMoon App.

In tanti mi avete chiesto come poter utilizzare icone personalizzate all’interno di un sito web WordPress (in particolare l’icona personalizzata realizzata leggendo il mio precedente articolo).

Eccomi quindi a rispondervi tramite questo nuovo articolo  🙂

Come spiegato alla fine del precedente articolo, all’interno dell’app IcoMoon tramite il pulsante “Download” puoi scaricare un file zip contenente i file del font, il file CSS necessario per incorporarlo all’interno di una pagina HTML ed una pagina di esempio demo.html.

Bene, per poter utilizzare l’icona o le icone create con IcoMoon devi estrarre il contenuto del file ZIP che troverai così strutturato:

• una cartella “fonts”
• un file style.css

La cartella “fonts” contiene i file del font personalizzato e deve essere copiata tramite FTP all’interno del tuo sito Worpress (ad esempio puoi copiarla dentro wp-content/uploads/).

Nel file style.css invece, trovi le indicazioni per caricare ed utilizzare il nuovo font nelle pagine del sito: dovrai copiarne il contenuto nell’editor css del sito (dal menù di WordPress Aspetto -> Editor). Dovrai però cambiare il percorso dei font inserendo il tuo percorso; se, ad esempio, hai copiato la cartella “fonts” nella cartella che ti ho precedentemente indicato dovrai cambiare il codice come di seguito indicato nelle prime righe di codice:

@font-face {
  font-family: 'icomoon';
  src: url('/wp-content/uploads/fonts/icomoon.eot?1bqgzt');
  src: url('/wp-content/uploads/fonts/icomoon.eot?1bqgzt#iefix') format('embedded-opentype'),
  url('/wp-content/uploads/fonts/icomoon.ttf?1bqgzt') format('truetype'),
  url('/wp-content/uploads/fonts/icomoon.woff?1bqgzt') format('woff'),
  url('/wp-content/uploads/fonts/icomoon.svg?1bqgzt#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icona:before {
  content: "\e444";
}

Il nome della classe CSS “.icon-icona” dipende dal nome che hai dato all’icona dentro l’app IcoMoon prima di effettuare il download, come ho scritto alla fine del precedente articolo.

A questo punto potrai utilizzare l’icona all’interno delle tue pagine inserendo il seguente codice HTML:

<span class="icon-icona"></span>

Nell’editor di WordPress dovrai passare dalla visualizzazione “Visuale” a quella “Testuale”, cercare il punto in cui far apparire la tua icona ed inserire il codice HTML .

All’interno dell’app IcoMoon è possibile scaricare un set contenente più icone, quindi assegnando un nome diverso ad ognuna, avrai a disposizione una classe per ogni icona da utilizzare poi nel codice HTML della pagina.

Rileggi l’articolo su come creare un’icona personalizzata per il web tramite web font, usando Adobe Illustrator ed IcoMoon App per altri chiarimenti su come utilizzare IcoMoon.

Bene! Spero di essere stata chiara, ma se avete domande scrivetemi pure nei commenti 🙂

A presto!