whatsapp
keyboard_arrow_down Contatti

Sabato

19

Marzo 2022

Come installare material icons WordPress

Come installare material icons WordPress senza plugin

  1. blog Come installare material icons WordPress senza plugin
event_available
schedule

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.

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up