icon ~ simplifier l'utilisation des icônes

Utiliser facilement la police d'icônes installée sur votre, des caractères Unicode ou des images dans vos articles

Des exemples simples

{up icon=plus} 
{up icon=plus,red,2rem}

{up icon=Ux1F7A7} 
{up icon=Ux1F7A7,#F00,2rem}

{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 :

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.

• Icônes Icomoon
• Icônes Font-Awesome

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