Modifier la présentation des liens de navigation

KhyinnKhyinn Member

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 ?

Réponses

  • août 2021 modifié

    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/

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

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

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

  • octobre 2021 modifié

    Bonjour Ayden,

    l'exemple s'appuie

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

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

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

    Remise en ligne et test de mon vieux site re7net.com . le design et moi on ne sait ... s'est jamais reconnu en fait! mais je fait des efforts.

  • Ok, merci beaucoup @gcyrillus-nomade

Connectez-vous ou Inscrivez-vous pour répondre.