email

Come installare material icons WordPress senza plugin

Ti trovi in:
  1. blog Come installare material icons WordPress senza plugin

Pubblicato il , aggiornato il 23 Aprile 2021

Come installare material icons in WordPress senza aggiungere plugin? Spesso per ottimizzare la velocità del tuo sito web è necessario rimuovere alcuni plugin, specialmente se possiamo sostituirli da poche righe di codice!

Per installare le icone di Google material design devi mettere mano al codice sorgente di WordPress, nello specifico, al tema che stai utilizzando.

Per prima cosa apri il file functions.php del tuo tema e inserisci questo codice già pronto.

Ti consiglio di creare un tema child per non perdere tutte le modifiche al primo aggiornamento del tema genitore.

Tempo richiesto: 15 minuti.

Come installare material icons WordPress

  1. Apri il file functions.php del tuo tema

  2. Inserisci questo codice

  3. Cerca l’icona che vuoi su Google Icons

  4. Inserisci manualmente l’icona

add_action('wp_footer', function {
  ?>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <?php
});

In questo modo hai inserito nel footer il link al file css di Google contenente tutte le icone e le specifiche per utilizzarle nel tuo sito web.

Puoi anche inserire il link nell’head del tuo sito semplicemente sostituendo “wp_footer” con “wp_head” ma, in questa posizione, potresti rallentare leggermente il caricamento dei contenuti importanti. Ti consiglio la posizione wp_head solo se usi le tue icone nella parte più alta della pagina (menu o prima sezione) per evitare eccessive variazioni di layout.

code

Come inserire le icone in WordPress

Ora che hai capito come installare material icons in WordPress dovrai semplicemente inserirle manualmente nelle pagine del tuo sito.

Se usi un page builder oppure il builder predefinito di WordPress dovrai inserire un elemento “HTML personalizzato” contenente questo codice:

<span class="material-icons">face</span>

Con questo codice già pronto abbiamo inserito l’icona con la faccia dell’omino, e utilizziamo gli stili predefiniti delle icone.

Se vuoi cambiare icona ti basta sostituire “face” con il nome di quella nuova e lasciare invariato il resto del codice.

Trovi tutte le icone presenti in questa documentazione sempre aggiornata, ti basta cercare il nome di un’icona e in basso vedrai il nome da inserire nel tag <span>

elenco icone Google

Per personalizzare colori, dimensioni e altri elementi puoi sempre creare una tua classe css da aggiungere al codice con le istruzioni che vuoi modificare.

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message