Ajouter des icônes personnalisées aux liens menus

[Jeff71]

Bonjour la team,


Je cherche comment ajouter des icones personnalisées sur les liens menus.
Je sais sans soucis ajouter des icones Font Awesome mais je cherche à mettre des icones persos.

Avez vous un tutoriel ?

J'utilise Cassiopeia , J5.2

Merci du support et bonne journée

JF

[RobertG]

Bonjour,

La fonction "image du lien" dans le paramétrage de celui-ci ne conviendrait-elle pas ?

[carabao]

Bonjour

Solution que j'ai utilisée. Je ne sais pas si c'est "la" solution, mais elle fonctionne.




Dans mon gestionnaire de template "template-creator"


Répertoire où se trouvent les icônes icomoon --> pour les créer : https://icomoon.io/app/#/select


Feuilles de style CSS

[class^="iconperso-"], [class*=" iconperso-"] {
font-family: 'icomoon' !important;
display:inline;
position: relative;
padding-left: 1.25em;
}

.gazette::before {
font-family: "icomoon"; content: "\e904";
margin-right: 0.8rem;
}

voir ici: https://www.caravane-camping.be/

[daneel]

Bonjour,

Je vais t’expliquer rapidement comment intégrer des icônes personnalisées dans Joomla comme celle de font-awesome donc d'utiliser dans l'édition du lien de menu, "la classe d'icône de lien" pour appeler l'icône personnalisée mais également dans le contenu d'un article.

Par manque de temps, je vais aller à l’essentiel. N’hésite pas à chercher davantage ou à poser des questions si certaines étapes ne sont pas claires.

---

Étape 1 : Création de la fonte d’icônes personnalisées


Pour cet exemple, nous partons sur des icônes monochromes. Voici les étapes à suivre :

1. Création des icônes : Dessine tes icônes au format vectoriel (SVG). Pour cela, tu peux utiliser des outils comme Inkscape ou d’autres logiciels de design vectoriel.
2. Génération de la police : Accède à un service comme :
   • Fontello
   • IcoMoon
   • Fontastic
     Ces outils permettent d'importer tes icônes et de leur attribuer des codes (comme pour les utiliser avec des touches du clavier). L’objectif est d’obtenir une fonte d’icônes fonctionnant comme Font Awesome.
3. Téléchargement des fichiers : Une fois tes icônes sélectionnées, clique sur le bouton Download Webfont. L’archive générée contient :
   • La conversion de tes icônes en fonte
   • Une CSS d’exemple
   • Un fichier HTML de démonstration pour tester les icônes avec des balises CSS ou <i>.

---

Étape 2 : Intégration dans un template enfant Cassiopeia

Pour intégrer tes icônes dans Joomla, tu dois avoir un template enfant de Cassiopeia. Voici comment procéder :

1. Copie des fichiers : Place les fichiers de ta police (fonte, CSS) dans le répertoire approprié. Sous Joomla, les ressources comme les polices ou les images se trouvent ici :
   media/templates/site/nomdutemplateenfant/fonts
   ou
   media/templates/site/nomdutemplateenfant/css/fonts
2. Modification de la CSS : Édite le fichier CSS pour y ajouter les styles de ta webfont, en ajustant le chemin relatif vers les polices.
3. Utilisation de user.css : Si tu rencontres des difficultés avec SCSS, la minification ou la compression Gzip, utilise simplement le fichier user.css pour inclure tes styles.

Pour plus de détails sur la gestion des chemins et l'intégration de polices locales, tu peux consulter cette discussion utile :
Ajouter et utiliser une police locale dans Cassiopeia

Une fois cette configuration en place, elle pourra être réutilisée pour d’autres créations d’icônes personnalisées.

---

Étape 3 : Aller plus loin

Il est possible d’aller encore plus loin en personnalisant davantage tes icônes :

• Icônes en Dual Tone : Crée des icônes avec deux teintes, similaires à la version pro de Font Awesome (Documentation sur les icônes Duotone).
• Icônes en couleur : Ajoute de la couleur à tes icônes pour un rendu visuel plus riche.
• Icônes animées : Anime tes icônes et déclenche leur animation à partir d’événements (comme le survol ou le clic sur un élément de la page).

---

Cela peut sembler complexe au début, mais une fois les étapes maîtrisées, le processus devient beaucoup plus simple pour tes futures créations.

Si tu cherche d'autres solutions :
- tu peux créer un shortcode qui appellera ton fichier svg avec un plugin qui fonctionne en dehors du contenu d'article.
- déjà en 2022 : https://forum.joomla.fr/forum/joomla...71#post2043771

Enfin la solution la plus simple :

En backend, dans contenu > media puis le bouton "paramètres" en haut à droite du gestionnaire de media

Défini svg dans les extensions autorisés et images autorisées
Ajoute le mime dans la liste des types mime autorisés : image/svg+xml

Edite le lien de menu, puis dans image du lien, télécharge ton fichier svg qui sera accepté.





C'est certainement la solution la plus simple mais tu dois t'assurer de la sécurité sur les fichiers svg car si ce n'est pas défini dans le pack joomla par défaut, c'est surtout par le fait d'accepter les svg peut créer une faille de sécurité si tu laisse trop d'autorisations.( un utilisateur malveillant pourra à l'occasion transférer un fichier svg contenant du javascript ou autre contenu dangereux qui seront executés dans les navigateurs clients. Ce qui est intéressant, c'est de savoir définir une csp (politique de sécurité) limitant l'injection de code ou d'ajouter un filtre à l'import de fichier svg. Bref, tu est prévenu !



Bonne chance et n’hésite pas à poser des questions si besoin !