Ajouter des icônes devant les liens du menu dans PluXml

Ajouter des icônes devant les liens du menu dans PluXml

Pluxml aucun
Dans cet article, il sera expliqué la manière d'insérer des icônes Font Awesome devant les liens du menu.
Dans cet article, il sera expliqué la manière d'insérer des icônes Font Awesome devant les liens du menu comme dans l'exemple ci-dessous.

Pour ajouter des icônes comme celles de fontawesome dans son menu de navigation, il existe plusieurs méthodes, nous en verrons 2 dans cet article. La méthode CSS et la méthode JS. La méthode JS n'est possible seulement si vous avez accès aux fichiers de votre thème.

Importer les liens Font Awesome

Importons premièrement les fichiers css de Fontawesome qui se trouvent à cette adresse: Font Awesome


 <head>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 </head>

Méthode CSS

Le menu sous PluXml se présente sous cette forme. Il n'est pas possible pour le moment d'y ajouter des icônes différentes pour chaque lien de menu.

  
    <div class="responsive-menu">
      <label for="menu"></label>
      <input type="checkbox" id="menu">
      <ul id="static-nav" class="menu">
        <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id" class="#static_class #static_status"><a href="#static_url" title="#static_name"> #static_namev/a></li>', '', 2); ?>
      </ul>
    </div>
  

Pour placer les icônes devant les liens du menu, il faut utiliser la pseudo-classe "before".

Marche à suivre :

  1. On définit la police d'écriture à utiliser, ici "Font Awesome 5 Free" ou "Font Awesome 5 Pro" cela dépend de ce que vous avez choisi. Dans mon cas, je n'utilise ici que des icônes libres.
  2. Ensuite il faut préciser le poids de la police "font-weight:900". 900(Solid), 400(Regular) et 300(light)
  3. Et enfin définir le contenu de la valeur de l'icône choisie sur Fontawesome.

  
    .menu > li.menu a {
padding: 15px 10px;
color: #fff;
}

.menu a:before { font-family: "Font Awesome 5 Free"; font-weight: 900; } #static-home a:before {content: "\f015";} #static-blog a:before {content: "\f086";} #static-2 a:before {content: "\f055";}
 Ici, #static-home correspond à l'identifiant de l'item du menu Accueil, on peut le voir lorsque vous afficher l'inspecteur de la page (F12).



Le content:"\f015" correspond à <i class="fas fa-home"></i> dans Fontawesome. Vous pouvez trouver la valeur de l'unicode sur la page de l'icône.


Méthode JS

Pour la méthode Js, on peut utiliser la méthode .prepend( ) de la librairie Jquery. Cette méthode permet d'insérer un contenu spécifié dans la balise cible. Dans notre cas, la balise cible est la balise lien <a href="http://margauxgirard.fr/">Lien</a>

Marche à suivre :
  1. Comme pour la méthode CSS, importer la feuille de style Font Awesome dans le <head>.
  2. Créer dans votre thème un fichier iconMenu.js et ajouter les lignes suivantes en changeant selon votre menu.
    Dans cet exemple,  la 1ère ligne correspond au lien Accueil du menu. On lui dit d'insérer la balise <i class="fas fa-home"></i> en premier dans la balise $("#static-home a")
    $("#static-home a").prepend('<i class="fas fa-home"></i>'); //home  
    $("#static-blog a").prepend('<i class="fas fa-comment"></i>'); //blog
    $("#static-2 a").prepend('<i class="fas fa-plus-circle"></i>'); //prestations 
  3. Ajouter le script du nouveau fichier JS dans le fichier footer.php de votre thème
    <script type="text/javascript" src="http://margauxgirard.fr/<?php $plxShow->template(); ?>/js/iconMenu.js"></script>

Les icônes de tous vos liens de menu sont présents, il suffit maintenant de les styliser un peu lors du passage de la souris par exemple.