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

➠ icon : uniformise l'appel des icons. Evite de passer en mode code pour la saisie

Cliquer pour lire la documentation

syntaxe : {up icon=nom_icone}
Important : indiquer dans prefs.ini le préfixe pour la police d'icones installée sur le site
author Lomart version UP-0.9 license GNU/GPLv3 tags editor
  • 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

    france france

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

    ico-idee une idée simple que le rédacteur peut faire grandir en adaptant légerement le shortcode {up icon=idee | size=48} ico-idee

    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.