Per chiudere velocemente questo tutorial, potrei semplicemente dirvi di usare il plugin wp svg, ma non lo faccio per quattro motivi.
- Che senso avrebbe una seconda pagina del tutorial?
- Andremmo ad appesantire molto il sito con un altro plugin e con una serie di inutili icone aggiuntive.
- Buona parte dei temi wordpress basati su bootstrap si porta dietro le icone di fontawesome (nato appunto per bootstrap). Siete sicuri di voler aggiungere altre 500 icone a quelle già esistenti?
- Non ho provato il plugin e sono solito parlare male solo dei film che ancora non ho visto, per tutto il resto ho un estremo rispetto.
Inseriamo le icon font personalizzate nel nostro tema wordpress
Caricate la cartella fonts, scaricata in precedenza da icomoon, nella cartella fonts del vostro tema o createne una nel vostro child theme.
Quindi, aprite il file style.css che trovate nella solita cartella scaricata in precedenza e incollatene il contenuto (o valutate se creare un nuovo file) nel foglio di stile del vostro tema.
In questo caso ho creato un nuovo foglio di stile che ho inserito in una cartella css del child theme di wordpress, perciò gli url saranno questi:
@font-face {
font-family: 'music-cover';
src: url('../fonts/music-cover.eot?dr0xt7');
src: url('../fonts/music-cover.eot?dr0xt7#iefix') format('embedded-opentype'),
url('../fonts/music-cover.ttf?dr0xt7') format('truetype'),
url('../fonts/music-cover.woff?dr0xt7') format('woff'),
url('../fonts/music-cover.svg?dr0xt7#music-cover') format('svg');
font-weight: normal;
font-style: normal;
}
Quindi vado a chiamare il nuovo foglio di stile nel file function.php, inserendo queste 2 righe:
wp_register_style('music-cover', get_stylesheet_directory_uri(). '/css/music-cover.css');
wp_enqueue_style('music-cover');
Per finire, o quasi, ci sono diversi modi per richiamare le vostre icone nella pagina, io ho utilizzato il tag <i></i>, quindi torniamo al foglio di stile e inseriamo qualche altra riga
i {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'music-cover'!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;
}
.music-cover1:before {
content: "e901";
}
.music-cover1:before {
content: "e903";
}
.music-cover3:before {
content: "e904";
}
N.B.: se utilizzate altre icon font eliminate la dicitura “!important” dalla terza riga di questo codice: potrebbe non visualizzare più le altre icone del tema.
Una volta compilato il foglio di stile basterà richiamare nella vostra pagina l’icona che volete utilizzare in questo modo:
<i class=”music-cover1″></i> seguita da testo o da quello che vi pare.
Per finire
È vero, come dicevo all’inizio, i “disegnini” piacciono a grandi e piccini, ma fate attenzione a non intasare il vostro sito di immagini e icone per non appesantirlo troppo. Di norma i web designer molto conosciuti e che operano con grandi marchi, riempiono i siti del cliente di “tamarrate” (sempre con gusto però) ma poi, se andate a vedere il loro sito web, è totalmente spoglio, con pochissime immagini (spesso quasi nessuna) e solo testo, con un page speed che di solito supera i 90/100 (mentre quello del cliente va bene se supera i 60/100). È anche vero però, che non tutti possono permettersi un sito di solo testo (per i motivi riportati all’inizio di questo tutorial), quindi trovate un equilibrio tra prestazione e “user experience”.
Insomma per parafrasare e invertire il senso del proverbio sul prete: “fa quello che il web designer fa, non quello che dice”.
Spiegazione ben fatta. Ho seguito i tuoi passi, tuttavia, provando a togliere la dicitura “!important” mi visualizza solo le altre icone del tema.
Ciao Chiara, spesso dipende dalla priorità dei css, del tema e del tuo custom. Se non ti crea problemi tieni pure l'”!important”, soprattutto se vedi sia le tue icon font che quelle del tema sui diversi browser. Io consiglio di toglierlo per evitare di sovrascrivere, involontariamente, altre regole del css.