Ajouter une icône au titre d'un module

**jps0302** · 01/10/2022, 13h21

Bonjour

je ne comprends pas la raison pour laquelle vous souhaitez ajouter des icônes aux modules .
Les noms de modules ne sont pas affichés, comme le sont les liens de menus.
Merci de préciser

**Alain_56** · 01/10/2022, 17h29

Envoyé par jps0302 Voir le message

Bonjour
je ne comprends pas la raison pour laquelle vous souhaitez ajouter des icônes aux modules .
Les noms de modules ne sont pas affichés, comme le sont les liens de menus.
Merci de préciser

Bonjour jps,
Il est possible d'afficher le titre d'un module avec un clic sur l'option.

Ci-dessous l'affiche d'une icône avant le titre sur Joomla 3, en précisant le titre [icon-envelope] Contact

**lefabdu51** · 01/10/2022, 17h35

La methode reste valable.mais c est fontawesome v6, les noms de classe ont peut etre changé

**Alain_56** · 01/10/2022, 18h54

Envoyé par lefabdu51 Voir le message

La methode reste valable.mais c est fontawesome v6, les noms de classe ont peut etre changé

Effectivement, les noms de classe sont différents, et je n'arrive pas à appliquer les instructions de ce tuto
https://www.alticreation.com/comment...-font-awesome/

J'ai créé la liaison avec la librairie dans index.php, entre <head> et </head>

Code:

<link rel="stylesheet"
href="[URL="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"]https://cdnjs.cloudflare.com/ajax/li...ss/all.min.css[/URL]"/>

Maintenant, je ne sais pas comment utiliser le code

Code:

<i class="fa-regular fa-envelope"></i>

Si je place fa-regular fa-envelope dans le champ Classe d'en-tête/titre, un cadre de remplacement s'affiche devant Contact à la place de l'icône.
Je suis sur la bonne voie, j'attends un petit coup de pouce pour finaliser ...

**lefabdu51** · 02/10/2022, 13h59

essaye ceci: extrait de la doc fontawesome 6.2:

<i class="fa-solid fa-envelope"></i>

si tu cherche la nouvelle syntaxe à appliquer

Envelope Classic Solid Icon | Font Awesome

https://fontawesome.com/icons/envelope?s=solid&f=classic

Envelope icon in the Solid style. Make a bold statement in small sizes. Available now in Font Awesome 6.

**daneel** · 03/10/2022, 05h05

Bonjour,

Les tutoriels ne sont pas toujours adaptés pour s'utiliser avec Joomla car Font Awesome Free 5.15.4 est déjà installé nativement.
L'appel se faisant par la classe css "icon-" suivi du nom de l'icône par exemple "envelope", ce qui donne "icon-envelope",
on peut aussi utiliser "fas fa-envelope" mais le premier choix me semble meilleur.

Effectivement, on peux insérer dans la classe d'entête/titre, ce qui va permettre de faire apparaître l'enveloppe précédent le titre.

Cependant cette solution pose problème car la classe est appliquée sur la balise titre, sous cassiopeia par défaut, ce sera la h3.
Cela a pour conséquence d'écraser la "font-family" définie par la variable css sur les h3.

Pour ma part, j'ai résolu en développant un sélecteur d'icône qui s'associe aux modules pour choisir sans utiliser leur nom.
Je l'ai intégré avec plus de choix dans mon framework de template. Ce framework sera bientôt disponible avec d'autres fonctionnalités inédites.

En attendant, je te propose une solution alternative tout aussi performante...

Cette solution que je préconise, c'est d' écrire sous la forme [icon]book[/icon] dans le titre d'un module suivi d'un espace entre le code et le titre.

Sous Joomla 3, ce type d'écriture similaire au "bbcode" n'etait pas natif et ce ne sera pas non plus dans joomla 4 car en réalité, c'est une extension tierce comme rokcandy qui effectue ce changement. Le composant de rokcandy n'a pas été porté sur joomla 4 mais le plugin de "6 ko" qui est le moteur de rokcandy a bien été adapté et c'est bien suffisant !

L'extension qui est une adaptation de rokcandy se nomme EASY SHORTCODE, on peut télécharger en cliquant sur "Get Easy Shortcodes (v1.1.0)" depuis
https://extensions.joomla.org/extens...sy-shortcodes/

Les étapes sont simples mais il faut les respecter :

1. Installation du plugin
Télécharger via le lien ci-dessus puis installer comme toute extension joomla,
N'oubliez pas de l'activer dans la gestion des plugins car il ne se fait pas automatiquement.

2. Créer le fichier shortcodes.ini
Celui-ci doit être placé dans le repertoire html de votre template "par défaut".
Si c'est cassiopiea le chemin sera donc templates/cassiopeia/html/shortcodes.ini

Si vous n'avez pas d'editeur html comme notepad++ ou vous n'avez pas la possibilité de transférer via ftp ou autre, vous pouvez utiliser Joomla !
Dans Système > Templates du site > Cassiopeia Details et fichiers
Cliquer sur "nouveau fichier" puis selectionner "html" dans la colonne de gauche de la fenêtre popup ouverte,
saisissez le nom de fichier : shortcodes et le type de fichier : ini puis créer

L'éditeur s'ouvre, il vous reste à saisir le code de remplacement :

Code:

[icon]{class}[/icon]=<i class="icon-{class}"></i>

Il ne reste plus qu'à sauvegarder et à tester.

Dans le module menu, j'ai écrit [icon]book[/icon] Menu principal

Le résultat

L'avantage, c'est d'avoir la classe appliqué uniquement sur l'icône avec le code html

Code:

<i class="icon-book"></i>

Le plugin prend peu de ressource (infime). j'ai utilisé de nombreuses fois rokcandy dans le développement de templates car cela permettait d'offrir divers éléments déjà pré-réglés avant l'apparition des builders avec une personnalisation possible donc le fait de réutiliser la même technique avec le fichier ini est une très bonne idée sous Joomla 4.
De plus, c'est un plugin système et non un plugin de contenu, ce qui lui permet de faire un rechercher/remplacer dans toute la page (y compris dans les titres de liens ou de modules).

Essayer de faire évoluer le code de façon à ajouter par exemple des classes css de couleur en variable de façon à personnaliser l'icône indépendamment du titre. exemple dans shorcodes.ini : [icon couleur="{couleur}"]{class}[/icon]=<i class="icon-{class} {couleur}"></i>
ajouter vos couleurs dans le fichier css personnalisé en définissant les classes par des couleurs spécifiques ou en utilisant les variables définis par bootstrap et ceux du template, et le tour est joué !

On peut même aller plus loin....

En créant des icônes de deux couleurs ( exemple duotone : https://fontawesome.com/docs/web/style/duotone dans font-awesome version pro uniquement ) ou multi-couleurs avec des fichiers svg (via inkscape par exemple). Lors de mes créations de template sur mesure, je créé en premier les images vectorielles personnalisées (des créations originales adaptés au client) en fichiers svg puis je les ajoute dans fontello.com pour les transformer en fonte. J'utilise également des propriétés d'animations et d'icônes en plusieurs couleurs. J'incorpore la fonte dans le template et je peux utiliser ainsi les icônes personnalisés dans tous le site via les méthodes évoquées comme easy shortcode et autres.

Cela peut sembler complexe et c'est le cas notamment pour écrire la css et réaliser des animations mais néanmoins, je travaille actuellement sur la simplification notamment de l'insertion de fonte et d'icônes par un simple glisser/deposer. A suivre

N'hésitez pas à faire votre retour sur le sujet.

**Alain_56** · 09/10/2022, 06h38

Envoyé par daneel Voir le message

Bonjour,

Les tutoriels ne sont pas toujours adaptés pour s'utiliser avec Joomla car Font Awesome Free 5.15.4 est déjà installé nativement.
L'appel se faisant par la classe css "icon-" suivi du nom de l'icône par exemple "envelope", ce qui donne "icon-envelope",
on peut aussi utiliser "fas fa-envelope" mais le premier choix me semble meilleur.

Merci daneel,
Cette réponse documentée doit solutionner mon problème. Je vais me pencher sur les options...
Alain

**Alain_56** · 09/10/2022, 07h17

Yeaaaa,
Je viens d’appliquer avec succès

, ta proposition avec l'extension EASY SHORTCODE.
C'est simple et efficace !
Merci

**Alain_56** · 09/10/2022, 07h40

Oups,
Je constate que les css contenus dans user.css ne sont plus appliqués !?
J'ai désactivé EASY SHORTCODE mais rien n'y fait.
Avez-vous une idée ?

**daneel** · 09/10/2022, 14h11

Envoyé par Alain_56 Voir le message

Oups,
Je constate que les css contenus dans user.css ne sont plus appliqués !?

Le plugin ne fait que prendre le contenu du shortcodes.ini pour effectuer virtuellement un rechercher/remplacer.
Il ne modifie pas les fichiers ou le contenu existant, je doute que ce soit la cause de ton problème.

**Alain_56** · 09/10/2022, 17h26

Envoyé par daneel Voir le message

Le plugin ne fait que prendre le contenu du shortcodes.ini pour effectuer virtuellement un rechercher/remplacer.
Il ne modifie pas les fichiers ni le contenu existant, je doute que ce soit la cause de ton problème.

Tu as raison Daneel, une ligne de code erroné dans le css est à l'origine du problème.
MERCI, bonne fin de week-end

Ajouter une icône au titre d'un module

[RÉGLÉ] Ajouter une icône au titre d'un module

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association