whatsapp   

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

Ci dispiace ricevere questa notizia. Aiutaci a migliorare! Cosa non va nell'articolo?

message
library_books

Leggi anche

Come usare le chiavi API Google
Scopri
Come inviare dati dei form con Ajax serialize() a php
Scopri
Come unire file Javascript e CSS in WordPress
Scopri
come creare tipi di post personalizzati in wordpress
Scopri
Come creare template articoli personalizzato WordPress
Scopri
Come fare redirect in WordPress senza plugin
Scopri
Come recuperare utenti WordPress e dati senza plugin
Scopri
Variabili in CSS come usarle nei tuoi fogli di stile
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.

message
perm_identity
alternate_email

Inviato

keyboard_arrow_up