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 cours de ce tutoriel comment ajouter des icônes à vos liens de menus sur votre site Joomla 4.

Les icônes vectorielles

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 ce type d'icônes, vous avez deux possibilités pour l'ajouter :

  • ajouter une ligne de code dans 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://fontawesome.com/start.

Ajouter des icônes à vos liens de menus

Maintenant que votre template dispose de la Font Awesome, vous allez pouvoir personnaliser vos liens de menus à votre convenance.

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

liens de menus Joomla

A partir du menu latéral, cliquez sur Menus puis ouvrez le menu contenant les liens de menus à personnaliser.

menu lateral Joomla 4

Ouvrez ensuite le lien de menu à personnaliser (ici, nous allons ajouter le logo Joomla au lien de menu CMS Joomla).

Le code pour afficher l'icône Joomla avec la Font Awesome est le suivant : fab fa-joomla (source Font Awesome).

Ouvrez maintenant l'onglet Type de liens et dans le paramètre Style CSS du lien, ajoutez le code de la Font Awesome fab fa-joomla comme ceci :

paramètre style css du lien

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.

résultat lien de menu personnalisé

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 cours de ce tutoriel comment ajouter des icônes à vos liens de menus sur votre site Joomla 3.

Les icônes vectorielles

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 ce type d'icônes, vous avez deux possibilités pour l'ajouter :

  • ajouter une ligne de code dans 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://fontawesome.com/start.

Ajouter des icônes à vos liens de menus

Maintenant que votre template dispose de la Font Awesome, vous allez pouvoir personnaliser vos liens de menus à votre 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

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net