Come aggiungere icone di immagini alle voci del menu di navigazione di WordPress utilizzando cPanel

Se hai visto le icone in un menu di navigazione, potresti anche chiederti di usarle sul tuo sito Web WordPress. Ma il problema si verifica quando sono richieste competenze di codifica.


Se sei un principiante, è possibile installare e attivare un plug-in per utilizzare una qualsiasi delle icone della libreria Font Awesome. Ma se conosci un po ‘di CSS, puoi aggiungere icone delle immagini alle voci del menu di navigazione di WordPress in pochissimo tempo.

La domanda sorge se è necessario l’accesso a cPanel o meno. Bene, in questo tutorial, devi aggiungere CSS personalizzati. Puoi utilizzare l’editor CSS predefinito dalla tua area di amministrazione o lo spazio CSS aggiuntivo nel personalizzatore.

Sebbene la maggior parte degli esperti di WordPress nasconda l’editor dei temi per motivi di sicurezza, è possibile utilizzare il personalizzatore incorporato se lo si desidera.

In questo tutorial, ti fornirò un esempio del codice per farti capire il concetto, aggiungendo CSS è su di te.

È perché ogni persona ha un metodo diverso per aggiungere CSS personalizzati.

Carica immagini icona nella tua libreria multimediale

Prima di tutto, devi scaricare le immagini delle icone sul tuo computer. Carica quelle immagini nella tua libreria multimediale di WordPress.

Se ti stai chiedendo di utilizzare le icone anziché le immagini, devi integrare una libreria di icone di terze parti, che aumenta le richieste HTTP. Quindi, ti offrirò una soluzione semplice, che non influisce sul tempo di caricamento della pagina di un sito Web.

Ora segui i passaggi.

Passo 1:

Vai a Aspetto>>menu nella tua area wp-admin, dove puoi vedere il menu corrente.

Come aggiungere icone immagine alle voci del menu di navigazione di WordPress

Passo 2:

Ora, se vedi da vicino nell’angolo in alto a destra, puoi trovare a "Opzioni schermo" collegamento. Puoi vedere un mega menu a discesa.

Come aggiungere icone immagine alle voci del menu di navigazione di WordPress

Sotto il "Mostra proprietà di menu avanzate" intestazione, puoi vedere una casella da controllare Classi CSS, controllalo.

Passaggio 3:

Ora scorri verso il basso e apri qualsiasi voce di menu. Diciamo "Casa."

Come aggiungere icone immagine alle voci del menu di navigazione di WordPress

Puoi vedere un campo da compilare sotto Classi CSS (opzionale). Aggiungiamo "menuicons" come classe CSS. Clicca sul Menu Salva pulsante.

Passaggio 4:

Per far apparire un’immagine di un’icona, hai bisogno di alcuni CSS. Lascia che ti mostri un esempio.

.menuicons {
immagine di sfondo: url (‘http://www.yoursite.com/wp-content/uploads/2018/06/home.png’);
background-repeat: nessuna ripetizione;
posizione di sfondo: a sinistra;
imbottitura-sinistra: 5px;
}

Nota: Non dimenticare di sostituire l’URL dell’immagine con l’indirizzo scelto dalla tua libreria multimediale.

Lascia che ti mostri da dove puoi copiarlo. Vai alla tua libreria multimediale, fai clic sull’icona dell’icona che vuoi visualizzare, copia l’indirizzo che vedi davanti all’URL.

Come aggiungere icone immagine alle voci del menu di navigazione di WordPress

Qui, ti ho mostrato di aggiungere un’icona immagine solo per una voce di menu. Per ogni voce di menu, devi scegliere una classe diversa e un nuovo codice CSS con l’URL di quella particolare icona dell’immagine.

Ecco la demo dell’icona immagine che ho appena aggiunto per l’icona home.

Come aggiungere icone immagine alle voci del menu di navigazione di WordPress

Come ho discusso in precedenza, ci sono diversi modi per aggiungere CSS personalizzati. Se non desideri caricare CSS da un’altra fonte diversa dal tuo file CSS principale, puoi utilizzare FTP o cPanel per modificarlo.

Vai a File Manager>> wp-content>> temi>> Cartella tematica>> style.css, fai clic con il tasto destro e scegli modifica.

Quasi ogni hosting di WordPress offre l’accesso a cPanel.

Aggiungi icone immagine alle voci del menu di navigazione di WordPress

Per molti utenti di WordPress, modificare il layout del sito Web esistente può essere spaventoso perché potrebbero non avere esperienza nei CSS.

Ma come puoi vedere, hai solo bisogno della comprensione di base del CSS per impostare l’icona di un’immagine come immagine di sfondo e regolarne la posizione.

Conclusione

Se pensi ancora che gestire i CSS possa essere difficile, allora dovresti usare un plugin. Anche se seguire i passaggi che vedi sopra non è difficile.

Spero che tu possa aggiungere icone di immagini alle voci del menu di navigazione di WordPress.

Dai un’occhiata a questi 3 principali servizi di hosting WordPress:

FastComet

Prezzo di partenza:
$ 2.95


Affidabilità
9.7


Prezzi
9.5


Di facile utilizzo
9.7


Supporto
9.7


Caratteristiche
9.6

Leggi le recensioni

Visita FastComet

Hostinger

Prezzo di partenza:
$ 0.99


Affidabilità
9.3


Prezzi
9.3


Di facile utilizzo
9.4


Supporto
9.4


Caratteristiche
9.2

Leggi le recensioni

Visita Hostinger

Hosting A2

Prezzo di partenza:
$ 3.92


Affidabilità
9.3


Prezzi
9.0


Di facile utilizzo
9.3


Supporto
9.3


Caratteristiche
9.3

Leggi le recensioni

Visita A2 Hosting

Articoli How-To correlati

  • Come aggiungere post particolari al menu di navigazione in WordPress
    intermedio
  • Come aggiungere un nuovo menu di navigazione al tema WordPress usando cPanel
    esperto
  • Come modificare la lumaca dell’URL di ricerca utilizzando .htaccess per un punteggio SEO migliore
    intermedio
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me