
Utiliser facilement la police d'icônes installée sur votre, des caractères Unicode ou des images dans vos articles
{up icon=nom_icone}
Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
- icon: jeu d'options ou src color size
- prefix = icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
- fontname = icomoon: pour icomoon ou FontAwesome ou autres (a mettre dans pref.ini)
- src: nom icone, code unicode, chemin image (indispensable si prefset)
- size: taille icone en px, em (px par defaut) - coté du carré dans lequel est inscrit l'image
- color: couleur
- color-hover: couleur lors survol icone (sauf image et unicode coloré)
- style: style inline
- class: classe
- selector: retour sous forme propriétés CSS pour ce selecteur
- info = 0: 1 affiche la liste des icons définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode
Des exemples simples
Police d'icônes
{up icon=plus}
{up icon=plus,red,2rem}
Caractères Unicode
🞧 🞧
{up icon=Ux1F7A7}
{up icon=Ux1F7A7,#F00,2rem}
Images
{up icon=images/icons/france.png}
{up icon=images/icons/france.png,32}
Dans les exemples ci-dessus, nous voyons les 3 types d'icônes que l'action peut gérer. Le shortcode, ici dans sa forme rapide, est identique. Il comprend :
- Le nom de l'icône sans le préfixe utilisé par la police d'icône
- OU le code du caractère Unicode. Il doit commencer par Ux suivi du code hexadecimal du caractère
- OU le chemin et le nom de l'image (jpg, png et gif autorisé)
Auquel, on peut ajouter la couleur et la taille en les séparant par des virgules. L'ordre n'a pas d'importance.
- La couleur peut être son nom, son code RVB ou rgba(). Celle-ci n'a de sens que pour un caractère monochrome.
- La taille, le côté du carré qui va inscrire l'icône, peut être en px (par défaut), em ou rem.
Si la taille n'est pas précisée, on utilise la taille courante pour les polices et la taille d'origine de l'image
Des options
Nous avons vu la méthode rapide pour saisir la taille et la couleur, mais il est aussi possible d'utiliser les options size et color.
L'option color-hover permet de définir la couleur des caractères monochrome lors de son survol.
Exemple : {up icon=plus,red,2rem | color-hover=green}
Il aurait été possible d'avoir le même effet en utilisant les classes CSS de UP : {up icon=plus,red,2rem | class=t-hover-vert}
Utilisation de plusieurs polices
L'intérêt de cette action est de pouvoir passer d'une police à une autre sans devoir modifier le contenu des articles.
Cela est possible du fait que l'on ne saisit que la partie variable du nom de la classe affichant l'icône. Cela fonctionne dans la plupart des cas.
icomoon : - font-awesome :
icomoon : - font-awesome :
<p>icomoon : {up icon=camera | size=3rem} - font-awesome : {up icon=camera | prefix=fa fa- | size=3rem}</p>
<p>icomoon : {up icon=bars | size=3rem} - font-awesome : {up icon=bars | prefix=fa fa- | size=3rem}</p>
Pour la camera, rien à redire. L'idée est la même. Par contre, bars est pris sous le sens stats par icoomoon et menu hamburger par font-awesome. bar-chart correspondrait mieux.
Dans le cas d'un changement d'icomoon vers font-awesome, on peut corriger cela à l'aide d'une petite règle CSS qui va corriger restropectivement toutes les utilisations.
.fa-bars { content: "\f080" }
C'est quand même plus simple et rapide que la recherche et mise à jour de toutes les utilisations dans les articles du site.
Collection d'icônes
Il est toujours délicat d'utiliser des icônes, car souvent, on ne se rappelle plus comment les insérer.
A partir de la version 1.7 de UP, le webmaster peut créer sa liste d'icônes favorites dans le fichier custom/prefs.ini
de l'action. Le plus simple est de renommer le fichier prefs.ini.dist
qui contient des exemples que vous pourrez adapter au style du site. Ce fichier ne sera jamais effacé.
L'intérêt pour le rédacteur est la possibilité d'en afficher la liste. Il suffit d'ajouter l'option info {up icon | info}
au shortcode pour obtenir ce résultat :

{up icon=idee | size=48}

Création d'une règle CSS
Il est courant d'avoir besoin d'ajouter une icône devant le titre de l'article en cours. Cela est possible en utilisant conjointement l'action icon et addcsshead
Le shortcode ci-dessous ajoute une émoticône souriante devant le titre de cette article.
{up addcsshead={up icon=Ux1F60A | selector=.article-header h1:before}}
Un autre exemple : si vous regardez la barre de menu, vous verrez une icône devant le menus "infos". Elle a été ajoutée par ce shortcode :
{up addcsshead={up icon=Ux1F6C8
| color=#369 | size=2rem | style=margin-right:-10px
| selector=ul.sp-megamenu-parent > li:nth-child(3):before}}
Références
Les polices standards Joomla 3 & 4
Vous trouverez dans les 2 pages ci-dessous l'intégralité des icônes pour les fontes installées avec Joomla 3 & 4.
Pour faciliter le passage d'icomoon vers font-awesome, les icônes dont la partie terminale du nom est identique sont en VERT.
Les caractères Unicode
Pré-requis
- une ou plusieurs polices d'icônes doivent être installées sur le site à l'aide des méthodes CSS habituelles.
- le préfixe utilisé par la police d'icônes par défaut soit renseigné dans le le fichier prefs.ini de l'action icon
Ce site utilise le template Helix Ultimate (Bootstrap 4.0) qui ne fournit plus de classes pour les icons. Elles ont été installées en suivant la méthode décrite dans cet article.