Modifier la présentation des liens de navigation

Khyinn · août 2021

Bonjour,
J'utilise Font Awesome dans un thème que j'ai créé pour PluXML 5.8.7.
Je voudrais pouvoir modifier mon menu de navigation pour pouvoir ajouter des icônes devant le nom, par exemple pour le lien Accueil, le modifier en :
<i class="fa fa-home"></i> Accueil

Y a-t-il un moyen de faire ceci, idéalement via un plugin ou directement dans le thème ?

gcyrillus-nomade · août 2021

Bonjour,

Une solution serait d'injecter tes icones via un pseudo en te basant sur la valeur title de ton lien et du de l'unicode correspondant à la version de fontawesome que tu utilise .

par exemple pour le lien de l'accueil , l'unicode à recuperer pour la version de fontawesome 6 se trouve sur la page de description de l’icône : https://fontawesome.com/v6.0/icons?d=gallery&p=1&q=home&s=solid

ce qui donnerait pour le CSS de base en version française :

        a[title="acceuil"]:before {
           font-family:fontawesome;
           content:'\1f3e0";
           /* si besoin , décommenter et affubler des valeurs qui te conviennent */
           /* vertical-align:  ; */
           /*color:  ; */
           /* font-size:   ;*/
        }

Il faut faire attention à utiliser l'unicode correspondant à la version de fontawesome utilisée . d'une version à l'autre ceux-ci peuvent changer.

Cordialement

edit :
voici un exemple basé sur la version 5.15 et lien d'acceuil extrait du code de https://demo.pluxml.org/ en demo : https://jsfiddle.net/hj37bL6u/1/

lubin · octobre 2021

Bonjour à tous,
@gcyrillus-nomade j'ai eu de même problème de Khyinn, merci beaucoup votre explication m'est très utile.

Ayden29 · octobre 2021

Bonjour @ gcyrillus-nomade, est-ce que tu peux me donner un autre exemple, car je suis un peu perdu , merci d’avance.

gcyrillus-nomade · octobre 2021

Bonjour Ayden,

l'exemple s'appuie

sur le contenu de la balise title du lien , mais tu peut utiliser un autre attribut (href ou id ou class) et y chercher une chaine complète ou partielle : voir https://developer.mozilla.org/fr/docs/Web/CSS/Attribute_selectors pour l'usage et la syntaxe.
la bibliothèque d’icône fontawesome ou tu trouveras de nombreuses icônes. https://fontawesome.com/v5.0/icons?d=gallery&p=2&m=free
l'injection d'un pseudo élément pour afficher une icône , cela peut-être une image de ton choix ou un texte si tu ne souhaites pas utiliser fontawesome.

Le jsfiddle en lien te fait une démo, il te suffit de copier le code et de le modifier en fonction de la valeur des tes attributs et icônes que tu souhaites afficher. https://jsfiddle.net/hj37bL6u/1/ version chargée : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

Si tu éprouves des difficultés, soit plus spécifique avec le contenu des attributs des liens auxquels tu veut ajouté une icône.

Ayden29 · octobre 2021

Ok, merci beaucoup @gcyrillus-nomade

Modifier la présentation des liens de navigation

Réponses