Comment ajouter une Icône aux liens de menu de Joomla
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é :