Utiliser facilement votre police d'icône dans vos articles
Cette action n'implante pas de librairie d'icônes. Elle a un rôle d'interface pour faciliter l'utilisation de la bibliothèque implantée sur votre site
{up icon=nom_icone}Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
- icon: nom de l'icone
- prefix=icon-: pour icomoon ou 'fa fa-' pour font-awesome (a mettre dans pref.ini)
- size: taille icone en px, em
- color: couleur
- color-hover: couleur lors survol icone
- style: style inline
- class: classe
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.
Exemple simple avec icoMoon et Bootstrap
1 2 3 4
1 {up icon=plus}
2 {up icon=plus | size=32px}
3 {up icon=plus | size=3rem | color=red | color-hover=orange}
4 {up icon=plus | size=3rem | class=t-rouge t-hover-orange}La syntaxe est très simple. on indique comme paramètre principal le nom de l'icône comme indiqué ci-dessous.
Normalement, le webmaster à défini le préfixe attendu par la police d'icônes installée sur le site. Si besoin, il est possible de le spécifier avec le paramètre prefix.
Il est possible d'indiquer la taille en px, em ou rem (size). La largeur ainsi que la hauteur de ligne seront adaptées.
Les couleurs peuvent-être indiquées directement (exemple 3) ou par des classes (exemple 4)
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.
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.