Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

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 icônes. Evite de passer en mode code pour la saisie

Cliquer pour lire la documentation

syntaxe 1 : {up icon=nom_icone}
syntaxe 2 : {up icon=Ux1F7A7}
syntaxe 3 : {up icon=images/icone.png}
syntaxe 4 : {up icon=Ux1F7A7,#F00,2rem}
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
  • src: nom icône, code unicode, chemin image (indispensable si prefset)
  • size: taille icône ou coté du carré dans lequel est inscrit l'image. px, rem, em, % (px par defaut). Responsive= basesize, breakpoint1:size1, breakpointN:sizeN
  • color: couleur
  • color-hover: couleur lors survol icône (sauf image et unicode coloré)

Pour ajouter l'icône à un bloc sur la page

  • selector: selecteur CSS pour identifier le bloc ciblé

Divers

  • info: 1 affiche la liste des icônes définies dans prefs.ini comme un message debug, 2 la retourne pour affichage à la place du shortcode
  • title (titre): texte affiché au survol de l'icone
  • 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)

Style CSS

  • style: style inline
  • class: classe
  • id: identificateur
Version 1.4
ajout prefix pour prise en charge plusieurs polices d'icônes
Version 1.7
ajout unicode et image, saisie rapide et collection dans custom/prefs.ini
Version 2.8.1
ajout option title (pascal)
Version 3.0
La taille des icônes varie en fonction de la largeur écran (responsive)

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 :

Auquel, on peut ajouter la couleur et la taille en les séparant par des virgules. L'ordre n'a pas d'importance.

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%}
france
{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.

Comme la taille indiquée dans l'option principale est toujours prise en compte, il est possible d'ajouter dans votre pref.ini les adaptations en pourcentage sous la forme :

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

ico-idee une idée simple que le rédacteur peut faire grandir en adaptant légèrement 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=.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.

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 🆙 fichier custom/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.

 

Pour info, cette page utilise 39 action(s) :
upactionslist (1) readmore (1) csv2def (1) tabslide (1) toc (1) icon (26) span (1) flexauto (1) div (1) addcsshead (2) article-category (1) modal (1) jcontent-info (1)