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

Adapter la taille à l'écran (responsive)

Nouveauté version 3.0 Il est possible d'utiliser l'option size pour indiquer la taille de l'icône en fonction de la largeur de l'écran.

Quelques exemples pour comprendre le principe. Modifier la largeur de votre navigateur pour voir l'effet :

❶

{up icon=plus,red,64px
 | size=640:48px, 960:32px}

❷

{up icon=plus,red
 | size=64px, 640:75%, 960:50%}

❸

{up icon=plugins/content/up/assets/img/france.png
 | size=64, 640:70%, 960:40%}

L'option size accepte une valeur simple utilisée pour toutes les largeurs d'écran ou des couples "largeur écran" : "taille icône" séparés par des virgules. Les dimensions peuvent être exprimées en px, em, rem ou %. L'unité par défaut est px.

❶  la taille de base de l'icône est indiquée dans l'option principale. L'option size est utilisée pour définir une taille de 48px si la largeur de l'écran est supérieure à 640px et 32px au-dessus de 960px.

❷ pour cet exemple, la taille de base est indiquée dans l'option size sans spécifier de largeur d'écran. Les variations en fonction des largeurs d'écran sont exprimées en pourcentage de la largeur de base. Si aucune largeur de base n'est spécifiée, la taille de police par défaut ou les dimensions de l'image seront utilisées.

❸ un exemple avec une image.

size="640:80%, 960:60%, 1200:40%"

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  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é.

En ajoutant l'option info au shortcode {up icon | info}, le rédacteur peut afficher la liste dans un panneau similaire à celui de l'option ?.
 {up icon | info=2} affiche la liste à l'emplacement du shortcode

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=.page-header h1:before}}

Un autre exemple : si vous regardez la barre de menu, vous verrez une icône devant le menus "Présentation". Elle a été ajoutée par ce shortcode :

{up addcsshead={up icon=Ux1F6C8
| color=#369 | size=2rem | style=line-height:0
| selector=#navbar ul.menu > li:nth-child(1) a: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