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 :
A partir du menu latéral, cliquez sur Menus puis ouvrez le menu contenant les liens de menus à personnaliser.
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 :
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.
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 :
A partir du panneau d'administration, ouvrez le menu contenant les liens de menus à personnaliser.
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.
Dans le paramètre Style CSS du lien, ajoutez le code de la Font Awesome fa fa-star.
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.
