Joomla - Come creare una voce di menu con icona Font Awesome o simili

google-plus Scritto da . Postato in Joomla!

In uno dei lavori che ho svolto recentemente, ho creato delle voci di menu visualizzate a front-end con una icona del set del framework Ulkit.

Il sistema per creare una voce di menu con icona al posto di una stringa di testo è lo stesso sia che utilizziate Ulkit, Font Awesome o Bootstrap. Per poter beneficiare però di questo "upgrade" estetico, sul vostro sito Joomla! devono essere inclusi che i file css e javascript che concorrono alla visualizzazione delle icone.

Se non avete incluso nel template in uso uno dei framework citati precedentemente e volete comunque poter utilizzare il loro set di icone, sarà necessario che provvediate a richiamare le librerie o modificando il template oppure installando dei plugin che le includano automaticamente senza dover mettere mano al codice.

Font Awesome è installabile attraverso il plugin NS Font Awesome,  Bootstrap è incluso in Joomla! e Ulkit, è incluso nei temi di Yoo Theme.

Le icone vengono caricate di fatto attraverso le librerie javascript e i fogli di stile CSS. Per poter usare un'icona all'interno del menu oltre ad includere le librerie necessarie, dovete sapere il nome della classe CSS che la rappresenta.

Nel caso di Ulkit le icone hanno nome simile a "icon-home" o "icon-cart" per Font Awesome, nomi simili a "fa-heart" o "fa-cart-plus". Per informarsi circa il nome dell'icona visitate i siti dei rispettivi set di icone (i link sono qui sopra).

Il trucco, sta nell'inserire nel Titolo della voce di menu il carattere &Shy; o trattino morbido che di fatto non verrà poi visualizzato a front-end. Va poi inserito manualmente un alias univoco che rappresenterà la voce di menu.

Nella scheda Opzioni link, della voce di menu, nel campo Classe CSS del link inseriremo ad esempio la stringa "css class: icon-home". 

Una volta impostati gli altri parametri obbligatori per la voce di menu e salvata, potremmo visualizzare l'icona scelta nella posizione asseganta alla voce di menu.

Nel video qui sotto, mostro come creare una voce di menu sfruttando il set di icone di Ulkit su di un sito Joomla con template di Yoo Theme:

Segnalo anche questo metodo che consente di utilizzare i Font Awesome all'interno del Titolo della voce di menu utilizzando un componente di Rocket Theme (RokCandy) in combinazione con il plugin NS Font Awesome:

How to Add Font Awesome Icons to Joomla Menu Links

Lo ho utilizzato con succeso per inserire all'interno di alcune voci di menu le icone Font Awesome in un sito Joomla che utilizza un template Yoo Theme un po' datato. Se volete vedere il risultato visitate il sito consorziovarone.it.

 

Se hai gradito l'articolo, condividilo, basta un click:

Aggiungi commento

I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.


Codice di sicurezza
Aggiorna

  • logo teoca
  • materexcel collabora
  • logo flash pulizie
  • revolution srl
  • logo arcotraslochi
  • montaggio mobili trento
  • logo elevatori sito
  • logo prontopro

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):