• Centre de formation Joomla!
    Tutoriels et formation Joomla!
    Apprenez en vous formant à votre rythme, en toute liberté,
    créez votre propre site Web avec Joomla!

Tutoriel Logo Joomla Joomla

Ajouter des icônes à vos liens de menus

Si vous désirez personnaliser l'affichage de vos liens de menus en leur ajoutant une icône, sachez que Joomla! vous permet de le faire très facilement. Et vous pouvez même décider d'avoir une icône spécifique pour chaque lien de menu. Nous allons voir au travers de ce tutoriel comment ajouter des ic$ones à vos liens de menus sur votre site Joomla.

Table des matières
- Les icônes
- La procèdure

Les icônes

Apparues il y a quelques années, les icônes comme Font Awesome connaissent un succès grandissant et mérité. Si certains templates les proposent maintenant nativement, ce n'est pas encore le cas de tous les templates en circulation. Si votre template ne dispose pas de la Font Awesome, vous avez deux possibilités pour l'ajouter :

  • ajouter une ligne de code à votre template,
  • ajouter une extension tierce à votre site Joomla,

Les deux procédures sont décrites avec précision dans le tutoriel Ajouter la Font Awesome à son template Joomla.

Pour la mise en oeuvre de la Font Awesome, veuillez vous référer à https://fortawesome.github.io/Font-Awesome/examples/.


La procèdure

Maintenant que notre template dispose de la Font Awesome, nous allons pouvoir personnaliser les liens de menus à notre convenance.

Pour l'instant, le menu contenant les liens de menus à personnaliser ressemble à ça :

Ajouter des icônes à vos liens de menuss

A partir du panneau d'administration, ouvrez le menu contenant les liens de menus à personnaliser.

Ajouter des icônes à vos liens de menus

Ouvrez ensuite le lien de menu de votre choix (ici, nous allons ajouter une étoile au lien de menu Nos services).

Le code pour afficher une étoile avec la Font Awesome est le suivant : fa fa-star (source Font Awesome).

Sur l'écran du lien de menu, cliquez sur l'onglet Type de liens.

Ajouter des icônes à vos liens de menus

Dans le paramètre Style CSS du lien, ajoutez le code de la Font Awesome fa fa-star.

Ajouter des icônes à vos liens de menus

N'oubliez pas de cliquer sur Enregistrer & Fermer pour valider votre saisie.


Affichez maintenant le frontend de votre site pour constater que l'icône apparait effectivement bien dans le menu :

Vous pouvez maintenant personnaliser vos menus et liens de menu comme bon vous semble grâce à la Font Awesome.

Ajouter des icônes à vos liens de menus


 

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.