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 font awesome menu

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.

font awesome menu 1

  • 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.

font awesome menu 2

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 ...font awesome menu 3

4. Créez une macro avec RokCandy

  • Rendez-vous dans Composants > RokCandy > Macros

font awesome menu 4

  • Cliquez sur le bouton Nouveau

font awesome menu 5

Pour le champ Macro saisissez :

[icon]{icon}[/icon]

Pour le champ HTML saisissez :

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

font awesome menu 6

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

 font awesome menu 7

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

 font awesome menu 8

  • Cliquez sur Enregistrer & Fermer

6. Vérification

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

font awesome menu 9

D' autres tutoriels sur Joomla 3

Checklist SEO pour Joomla : le référencement Google avec Joomla

Améliorer la performance de Joomla & sa vitesse de chargement

4.875 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.88 (4 Votes)

Commentaires (0)

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites