web-dev-qa-db-fra.com

Ajouter le code HTML dans le champ de titre du menu

Ceci est mon besoin, je veux ajouter une balise HTML au titre du menu. Je veux ajouter des icônes devant chaque titre de menu dans l'interface.

Je veux ce résultat:

<li class="active">
 <a href="index.html">
  <i class="fa fa-dashboard"></i>
  Dashboard
 </a>
</li>

Quand j'essaie d'ajouter le <i class="fa fa-dashboard"></i> dans le champ du titre du menu, le filtre de Joomla le supprime.

Y at-il un moyen de stocker et d'afficher dans le module de menu?

Merci.

joomla-3.xmenu-item
6
lucasm107

Comme @Valentin l'a fait remarquer, le remplacement du menu est la bonne façon de résoudre ce problème. Cependant, si vous n'êtes pas familiarisé avec les substitutions Joomla et PHP, une solution rapide consiste à utiliser RokCandy (ou tout autre extension du fragment de code ). Fondamentalement, ces plugins remplaceront votre code non HTML par du code HTML, évitant ainsi les filtres Joomla.

Pour réaliser ce que vous essayez d'utiliser avec RokCandy, créez une nouvelle macro:

Macro 

[fa]{icon}[/fa]

[~ # ~] html [~ # ~] 

<i class="{icon}"></i>

Enregistrez et fermez votre macro. Maintenant, dans votre élément de menu, définissez le titre comme suit:

[fa]fa fa-dashboard[/fa] Dashboard

Enfin, vous devez définir les champs Alias et Titre de la page du navigateur (sous Affichage de la page) sur "Tableau de bord" ( ou ce que vous voulez), ou le titre de votre navigateur sera [fa]fa fa-dashboard[/fa] Dashboard.

enter image description here

3
johanpw

Si votre modèle le prend en charge, vous devez avoir des identifiants de classe numériques pour chaque élément de menu. Si vous en avez, ou si vous pouvez l'ajouter à votre modèle/menu, il est probablement plus sûr d'utiliser simplement CSS et de styliser ces éléments de menu de cette façon.

Donc, si votre élément de menu est dit classe 155, il apparaîtra probablement dans la ligne li comme suit:

<li class="active item155">

Donc, encore une fois, en suivant votre structure, vous feriez quelque chose comme ceci dans votre CSS:

li.item155 a i:before {font-family:FontAwesome;content: "\f0ce";}

Où\f0ce est le code génial de police pour cette icône que vous voulez.

Si vous n'avez pas ces identifiants de menu, vous pouvez les modifier avec li: nth-child (x), où x est l'élément de menu dans l'ordre du premier au dernier. Donc, pour styler l'élément de menu numéro 3, procédez comme suit:

li:nth-child(3) a i:before {font-family:FontAwesome;content: "\f0ce";}

Si vous utilisez cela, je ne sais pas dans quelle mesure cela fonctionne avec les navigateurs, mais cela signifie que vous n'avez pas à modifier quoi que ce soit.

6
Brian Peat

Non, vous n'avez pas besoin d'ajouter du HTML à un élément de menu. Parfois, quand Joomla supprime des choses pour vous, c'est parce que vous ne devriez pas le faire comme ça (même si c'était beaucoup plus simple).

Ce dont vous avez besoin est un remplacement de modèle pour mod_menu.

En savoir plus sur les remplacements de modèles dans la documentation: Comment remplacer le résultat de Joomla! noyau

4
Valentin Despa

La façon correcte d’y parvenir est en fait la plus simple et ne nécessite aucun plugin ni remplacement, il suffit d’ajouter la classe icon au lien dans les options de l’élément de menu:

enter image description here

2
Seth Warburton