Valentin Garcia est l'auteur de l'article How to Add Icons to Joomla Menu Links dont la traduction est autorisée par  ostraining.com 

Beaucoup de templates Joomla offre la possibilité d'ajouter une icône à un élément de menu.

Si votre template ne possède pas cette fonctionnalité, nous avons la solution.

Continuez de lire cet article pour savoir comment ajouter les icônes de Font Awesome à vos liens de menu. 

1. Télécharger & installer NS Font Awesome

• Rendez-vous sur la page de NS Font Awesome page et téléchargez cette extension.

• Connectez-vous à l'administration de Joomla
• Rendez-vous dans Extensions > Gérer
• Cliquez sur le bouton Choisir un fichier & sélectionnez le fichier zippé que vous venez juste de télécharger puis cliquez sur le bouton Envoyer & Installer

2. Activer le plugin NS Font Awesome

• Rendez-vous dans Extensions > Plugins  
• Recherchez le plugin "System - NS Font Awesome" et activez le.

Ce plugin chargera les fichiers qui sont nécessiares pour que Font Awesome fonctionne sur votre site.

3. Téléchargez et Installez RokCandy

 Pour ajouter des icônes, il faut ajoute la balise <i>, cependant Joomla ne permet pas de l'ajouter directement dans le titre du lien de menu. Nous avons besoin de RokCandy pour "leurrer" Joomla.

• Rendez vous sur la page RokCandy , cliquez sur le bouton Download , dans le popup qui s'ouvre sélectionnez le bouton Download sur la ligne RokCandy Extension pour le télécharger.
• Installez le : Extension > Gérer ...

4. Créez une macro avec RokCandy

• Rendez-vous dans Composants > RokCandy > Macros

• Cliquez sur le bouton Nouveau

Pour le champ Macro saisissez :

[icon]{icon}[/icon]

Pour le champ HTML saisissez :

<i class="fa {icon}"></i>

Et pour finir cliquez sur le bouton Enregistrer & Fermer 

5. Utilisez la macro dans un lien de menu

Rendez-vous dans Menu > Votre menu > Votre lien de menu

Dans mon exemple, j'ajoute l'icône utilisateur près du texte Contact  avec le code suivant :

[icon]fa-user[/icon] Contact

Dans l'exemple ci-dessus, fa-user est la classe pour visualiser l’icône utilisateur. Pour savoir quelles classes d' icônes sont disponibles, consulter la liste sur le site du développeur de Font Awesome

• Rendez-vous dans l'onglet Paramètres d'affichage de la page 
• Saisissez un Titre dans le navigateur : votre élément de menu sans la macro

• Cliquez sur Enregistrer & Fermer

6. Vérification

Visitez votre site pour voir l’icône ajouté :