Parce que c’est mieux d’éviter de surcharger son site web / blog fait avec WordPress avec trop de plugins, il peut être intéressant d’essayer d’ajouter des icônes soi-même en passant par des hooks WordPress (fonctions WordPress) insérées dans son thème enfant ou par d’autres méthode moins lourdes ou nécessitant moins de requêtes. Car oui, en effet, il est possible de se passer d’un plugin pour intégrer des icônes sur son site Internet. Mais doit-on choisir plutôt des images ou des polices (fonts) ? Quels sont les avantages et les inconvénients de chaque type ? Comment les mettre en place ? Petit tour d’horizon ce ces éléments visuels devenus « iconiques » sur le web !
Menu de navigation rapide
Pour faire apparaître des icônes sur son site Internet, on peut choisir de les afficher en image (.png, .jpg, .gif…) ou directement depuis une police de caractères (« font » en anglais) comme la célèbre Times New Roman ou Comic sans MS (le « Voldemort » des polices de caractère…). Chaque type possède ses avantages, ses inconvénients et son utilisation propre que nous allons voir ici. Commençons par un petit tour d’horizon des types d’icônes.
Les icônes en images
Les icônes en images sont des icônes qui sont au format .png, .jpg, .svg ou .gif. On peut les trouver soit individuellement (1 seule icône par image), soit des planches avec plusieurs icônes bien rangées en ligne. Voici les 2 types :
Ces images seront utilisées comme n’importe quelle image sur votre site sous WordPress. On va soit les intégrer en tant qu’image dans l’éditeur WordPress en cliquant sur « Ajouter un média » comme on le fait d’habitude pour insérer n’importe quelle image, soit les intégrer en CSS (recommandé) grâce aux pseudo-éléments :before et :after pour les placer avant ou après un mot, une phrase ou un élément de navigation.
p:before {
content: "";
display: block;
background: url("icon.jpg") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}Sur ces différents formats on peut également les séparer en 2 catégories bien distinctes qui vont permettre différentes utilisations. On peut avoir un fichier image (individuel ou collectif) ou un fichier SVG (dessin vectoriel) !
Un fichier individuel par icône
Ce type de fichier (au format .png, .jpg ou .gif) va plutôt être statique donc vaut mieux bien s’assurer que le rendu final sera toujours le même avant de l’enregistrer sous photoshop, illustrator, gimp ou inkscape ! Car une fois enregistré il sera affiché tel quel tant au niveau de la couleur que de l’aspect. Rien que pour les dimensions de l’image il faut que ce soit bien défini dès le départ pour fournir une image aux bonnes dimensions pour ne pas avoir un excès de poids préjudiciable pour le chargement de la page, mais également pas trop petit pour ne pas avoir une qualité trop mauvaise.
Un fichier collectif pour toutes les icônes
Comme pour le fichier individuel il va être statique. Il s’agit d’un fichier image (en général .png ou .jpg) qui va regrouper l’ensemble des icônes et que l’on va placer ensuite en CSS pile pour qu’il affiche la bonne icône. On appelle ce fichier un « sprite » CSS (se prononce comme « esprit » sans le « e » au début et avec un « te » à la fin, et non pas comme la célèbre boisson gazeuse). Si on devait le résumer en une image, voilà comme serait représenté ce « sprite » :
On place le fichier correctement derrière la page, en coulisse, et on laisse juste une petite « fenêtre » (ici en pointillés sur l’image) pour laisser apparaître l’icône correspondante. Et à chaque fois qu’on a besoin d’une icône, on a plus qu’à déplacer l’image en entier pour que la bonne icône vienne se placer dans la « fenêtre ».
Un fichier au format SGV
Le fichier en format SVG possède cette caractéristique très intéressante qui consiste à être enregistré sous un format totalement adapté pour le web puisque utilisant le « langage » HTML. Si je reprends l’icône de localisation que j’ai mis plus haut dans cet article, voilà à quoi ressemble le code HTML qui découle du SVG qui le représente :
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 54.757 54.757" style="enable-background:new 0 0 54.757 54.757;" xml:space="preserve">
<g>
<path fill="#000000" d="M27.557,12c-3.859,0-7,3.141-7,7s3.141,7,7,7s7-3.141,7-7S31.416,12,27.557,12z M27.557,24c-2.757,0-5-2.243-5-5
s2.243-5,5-5s5,2.243,5,5S30.314,24,27.557,24z"/>
<path fill="#000000" d="M40.94,5.617C37.318,1.995,32.502,0,27.38,0c-5.123,0-9.938,1.995-13.56,5.617c-6.703,6.702-7.536,19.312-1.804,26.952
L27.38,54.757L42.721,32.6C48.476,24.929,47.643,12.319,40.94,5.617z M41.099,31.431L27.38,51.243L13.639,31.4
C8.44,24.468,9.185,13.08,15.235,7.031C18.479,3.787,22.792,2,27.38,2s8.901,1.787,12.146,5.031
C45.576,13.08,46.321,24.468,41.099,31.431z"/>
</g>
</svg>
Si on l’ouvre avec un navigateur comme chrome, voici le code HTML qui représente cette icône enregistrée en SVG. Il permet beaucoup de choses puisque tous ces éléments peuvent ensuite être modifiés directement en CSS (voir même être animés en javascript/jQuery comme mon logo sur ma page d’accueil). Par exemple, si on rajoute au HTML ci-dessus, ce code CSS :
svg { fill: #cedb00; }
On va obtenir une icône qui aura une couleur différente :
Et qui pourra ensuite subir tous les changements en CSS possibles comme les modifications en :hover, les modifications suite aux media queries, etc.
Avantages dans l’utilisation d’images pour les icônes
- L’utilisation de formats d’images connus : que ce soit les .png, .jpg et autres .gif on est en terrain plutôt connu tant sur la création que sur les modifications de ces images. Un petit tour sur notre logiciel préféré (photoshop, gimp, illustrator…) et le tour est joué,
- Une utilisation dans le code qui peut être plus simple puisque basique : On est sur l’utilisation de balises d’images et sur du CSS qui modifie des images ! Ce sont des techniques qui existent depuis presque aussi longtemps qu’internet,
- L’utilisation d’un « sprite » CSS permet de réduire le nombre de requêtes et le poids total des images/icônes sur une page. Avec un « sprite » une seule requête, un poids maîtrisé et ensuite il n’y a que du CSS pour faire le boulot. Fini le chargement de 38 icônes individuelles, on les charge toutes d’un coup en une seule fois et on est tranquilles !
- Une utilisation en SVG qui prend de plus en plus le pas sur le reste : Une technologie qui pèse pas lourd (dessin vectoriel, quelques kilos-octets seulement ce qui fait plaisir à Google et aux utilisateurs encore en 2G sur leurs smartphones.) et qui est de plus en plus prise en charge en CSS par les navigateurs. De plus, le SVG étant traduit en HTML son utilisation est plus simple et permet plus de choses pour l’apparence ou l’animation de l’icône.
Inconvénients dans l’utilisation d’images pour les icônes
- On est quand même sur des fichiers « relativement » lourds, les images étant les premières responsables du poids des pages et de la lenteur de chargement des pages sur le web. (moins vrai pour les SVG),
- Il faut jongler avec un logiciel de traitement d’images en plus,
- Il faut pouvoir maîtriser autant l’aspect HTML que CSS, et maîtriser les images en CSS. (Les paramètres des images surtout en CSS qui sont parfois un peu galère),
- Si le chargement du « sprite » CSS a un problème, ce sont toutes les icônes qui ne seront pas chargées,
- La prise en charge des SGV qui a encore des soucis parfois sur certains navigateurs (de moins en moins vrai !)
« On peut afficher des icônes en .jpg, .png ou en SVG »
Les icônes en police de caractères
L’autre moyen d’insérer des icônes est celui qui utilise des polices de caractères (fonts) qui regroupent tout un tas d’icônes comme on regroupe les caractères d’une police pour les utiliser sur son site Internet. Finalement une icône et une lettre de l’alphabet n’ont pas tant de différences que cela (surtout si on compare avec des langues qui utilisent des idéogrammes comme certaines langues asiatiques !).
Des fichiers de polices de caractères « classiques »
Pour utiliser les icônes en police de caractères on va le faire comme on le fait pour toutes les autres polices « normales ». On va se retrouver avec les fichiers de type :
- SVG : Car les polices peuvent également être réalisées en dessin vectoriel avec tous les avantages que cela comprend
- .TTF et .OTF : Peu adapté au web puisque contient l’ensemble des jeux d’une police et est relativement lourde pour une font web et est peu ou pas compressée.
- .EOT : Format créé au départ pour Internet Explorer
- .WOFF : Proposé par Mozilla, il a été pensé pour le web et est poussé par le W3C, organisme de normalisation des pratiques sur le web.
il suffit ensuite d’utiliser la police comme on le fait pour le reste des textes !
Font-Awesome, une des fonts d’icônes la plus connue
Sur Internet, il existe une police de caractères qui est utilisée depuis longtemps pour utiliser des icônes normalisés, bien réalisés et qui a bénéficié d’une grande communauté pour s’améliorer au fil des années et qui s’appelle Font-awesome ! Cette police utilise le SVG et le CSS pour mettre à disposition des icônes qui sont facilement intégrables et modifiables sur une page web.
Un des avantages d’utiliser Font-awesome vient aussi du fait qu’elle est disponible à travers leur propre CDN gratuit (Content Delivery Network). Cette technologie permet d’aller chercher la police de Font-awesome directement à la source au lieu d’avoir à la télécharger et de la stocker dans les dossiers de son propre site internet !
Avantages dans l’utilisation de « fonts » pour les icônes
- Une utilisation éprouvée depuis longtemps puisque les polices de caractères sont plus anciennes qu’Internet lui-même !
- Des avantages en terme de poids et de requêtes puisque si on utilise des polices spécifiques d’icônes qui ne font que quelques octets (que ce soit en utilisant des CDN ou en téléchargeant la police sur son site),
- L’utilisation de plus en plus importante du format SVG qui permet une personnalisation des icônes importante (couleurs, taille, animation, etc.),
- Une quantité importante de polices disponibles au-delà de Font-awesome et des outils pour transformer des icônes en police,
- L’utilisation du HTML et du CSS pour utiliser les icônes avec des polices spécifiques pour le web.
Inconvénients dans l’utilisation de « fonts » pour les icônes
- Des icônes difficilement modifiables une fois la police choisie,
- En cas d’erreur de chargement ou d’utilisation de la police, on se retrouve avec des carrés pas très jolis ou un vide qui peut devenir étrange et un aspect de la page pas terrible,
- Les navigateurs peuvent non seulement « lire » ces polices (et donc donner de fausses informations sur ce qui est raconté sur la page), mais également mal les afficher et ruiner le bel effet recherché,
- Quand on utilise une balise <i></i> pour des polices comme Font-awesome, on détourne quand même une balise italique pour placer une icône à l’arrache sans trop se soucier de la « sémantiquité » de son code HTML !
« On peut utiliser des icônes comme on utilise une police de caractère (font), exemple : Font-awesome ! »
Utilisation des icônes sur son site
Afin d’utiliser les icônes sur son site, on va surtout se concentrer sur une installation WordPress de base classique. L’utilisation de « builders visuels » comme Divi ou Visual Composer permet l’incorporation d’images et même d’icônes avec des jeux d’icônes déjà incorporés. Mais finalement on peut très bien utiliser les techniques présentées ici avec les builders visuels qui ont déjà leurs icônes, ce n’est pas parce qu’ils vous le proposent qu’il faut absolument l’utiliser !
Utilisation des icônes d’images seules en .jpg ou .png
Pour insérer une image on peut soit utiliser un énième plugin qui va alourdir l’installation et incorporer des banques d’images soit on utilise l’ajout de média de WordPress et on ajoute une icône comme on ajoute une image :
On se retrouve avec une icône et du texte à côté que l’on peut aligner verticalement soit en CSS directement (avec un display: flex;) soit avec un tableau (disponible dans l’éditeur WordPress. Voici donc ce que l’on va avoir :
Un exemple d’icône en image et aligné en CSS !
Une autre façon de faire est de directement insérer une icône en CSS avec les pseudo-éléments :before ou :after. On va utiliser ensuite des propriétés CSS pour modifier un peu le logo et aligner le tout :
Un exemple d’icône en image avec le pseudo-element :before
#exemple-before{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#exemple-before:before{
content: "";
height: 50px;
display: inline-block;
background-image: url(https://hop-pop-up-site-web-bordeaux.com/wp-content/uploads/2018/09/placeholder.png);
width: 50px;
background-size: contain;
position: relative;
}
Utilisation des icônes en SVG
Pour utiliser des SVG sur WordPress il suffit de faire comme avec les images, à ceci près qu’il faut d’abord demander à Wrdpress d’accepter le format SVG. Eh oui, WordPress est pas trop pour étant donné qu’il considère que ce genre de code est soumis à des failles de sécurité et il ne veut pas prendre de risques et être accusé ensuite d’être une passoire ! Pour cela, on va utiliser un plugin (une fois n’est pas coutume) : Safe SVG qui va non seulement autoriser l’utilisation de SVG sur le site mais également nettoyer tous les SVG que vous allez y charger pour éviter justement les problèmes de sécurité liés à ce type de fichier.
Ensuite il ne reste plus qu’à utiliser les SVG comme on utilise les images soit en les ajoutant avec ‘Ajouter un média’ dans l’éditeur de WordPress, soit en HTML et/ou en CSS, soit avec son builder Visuel !
Si vous êtes sûr de votre fichier SVG et/ou que vous êtes le seul à ajouter des images sur votre site, vous pouvez utiliser un Hook WordPress très simple pour accepter les SVG sur votre installation WordPress mais malgré tout cela n’est pas recommandé puisqu’on ne sait jamais vraiment ce qu’il peut se passer ni d’où viennent tous les SVG pris sur le net… Voici le code à mettre dans le fichier functions.php de votre thème enfant si vous êtes sûrs de vous et/ou juste joueur ! (Hop Pop Up ne pourra être tenu pour responsable en cas de problème ! C’est pas comme si vous n’aviez pas été prévenu hein 🙂 )
function wpc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'wpc_mime_types');
Utilisation d’un « sprite » d’images comme icônes
Pour utiliser un « sprite » il est préférable, une fois que l’on a notre image avec toutes nos icônes en format .png par exemple, d’utiliser un générateur de « sprite » en ligne afin qu’il facilite les choses niveau CSS et donne le code déjà tout prêt. On va donc prendre notre « sprite » comme celui ci :
Ensuite on le passe dans un outil de génération de sprite en ligne comme ZeroSprites qui utilise l’algorithme VLSI floorplaning plutôt pas mal pour alléger le tout.
Ensuite il ne reste plus qu’à utiliser le code CSS généré pour que la planche d’icônes soit bien placée pour montrer la bonne icône directement avec le pseudo-element :before :
.sprites {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sprite-icones-exemple:before {
content: "";
background: url(https://hop-pop-up-site-web-bordeaux.com/wp-content/uploads/2018/09/sprites-nq8.png) no-repeat;
width: 50px;
height: 50px;
display: inline-block;
background-position: -15px -15px;
}
L’objectif est de mettre sur le pseudo-élément :before une petite fenêtre de 50px x 50px et ensuite placer le « sprite » avec « background-position » pour que l’icône se place pile poil dans la fenêtre !
Utilisation des polices d’icônes classiques
Pour utiliser les icônes récupérés sur une police de caractères, il suffit de l’ajouter sur le fichier style.css de sont thème enfant la police avec la propriété @font-face :
@font-face {
font-family: 'icons';
src: url('https://hop-pop-up-site-web-bordeaux.com/wp-content/themes/divi-child/fonts/police-icones.woff');
}
Pour l’exemple j’ai récupéré une police d’icônes classique sur Dribble ! Une fois enregistrée, il ne reste plus qu’à utiliser la police en CSS comme d’habitude avec la propriété ‘font-family’ :
#ex-police-icones:before{
font-family: 'icons';
content:'P';
font-size: 50px;
}
Exemple d’icône avec une police de caractères d’icônes
Le seule petit souci c’est de trouver la correspondance entre l’icône et le caractère utilisé ! Ici l’icône est enregistré sous la lettre ‘P’ !
Utilisation des polices d’icônes comme Font-awesome
Afin d’utiliser une police d’icône on peut le faire sur WordPress avec 2 solutions : Depuis le code HTML (l’onglet « texte » quand vous êtes sur l’éditeur de texte WordPress) ou depuis l’onglet « visuel » sur l’éditeur de texte WordPress.
Si on utilise l’onglet « Visuel » il vaut mieux utiliser un plugin (oui je sais j’avais dit que ce n’était pas bien d’en utiliser un énième plugin mais là ça devient conseillé pour éviter de perdre des heures pour faire quelque chose qui peut se faire en 2 minutes et qui finalement ne pèse pas si lourd en terme de plugin).
Pour se faire je conseille d’utiliser le plugin qui fait les choses plutôt pas mal : Better Font Awesome ! Il permet d’utiliser directement dans l’éditeur de texte une icône. Il suffit juste de cliquer sur le bouton « Insert icon » qui se trouve juste à côté de « Ajouter un média ». Il va ainsi générer automatiquement un petit code (shortcode) qui sera inséré automatiquement dans le texte. Si vous voulez un aperçu de comment ça marche, c’est par ici !
Si on utilise l’onglet « Texte », il vaut mieux savoir utiliser un minium le HTML et le CSS. Mais avant cela il va falloir intégrer à son installation WordPress les icônes Font-awesome (gratuits pour cet exemple ici, puisqu’il existe une version payante qui diffère un peu) en insérant une fonction (Hook WordPress) dans le fichier « functions.php » de sont thème enfant. Si vous n’avez pas de thème enfant, je vous le conseille vivement et vous explique même comment faire dans cet autre tuto 😉
Le code va être celui-ci :
add_action( 'wp_enqueue_scripts', 'charger_font_awesome' );
function charger_font_awesome() {
wp_enqueue_style( 'font-awesome-gratuit', '//use.fontawesome.com/releases/v5.3.1/css/all.css' );
}
Maintenant tout va se passer du côté du CSS. Allons repérer une icône dans la doc de Font-Awesome et cliquons dessus (éviter les icônes qui ont un petit carré bleu marqué « pro » qui sont payants). Prenons des dés ! Pour les insérer il faudra donner certaines classes CSS au HTML pour le prendre en compte. On aura par exemple :
<p class="fas icones-font des">Exemple d'utilisation d'icône font</p>
- La classe « fas » qui est utilisée par font-awesome et qui possède son propre code CSS chargé en même temps que la police avec la fonction que l’on a rentrée dans « functions.php »
- La classe « icones-font » sera pour toutes mes icônes de mon site. Elle permet de regrouper toutes les règles CSS qui sont en lien avec mes icônes.
- La classe « des » aura pour mission de représenter cette icône en particulier pour éviter que les changements faits ici affectent les autres icônes du site !
Enfin il ne me reste plus qu’à mettre en place le CSS pour expliquer quel icône je veux utiliser et comment je veux l’utiliser :
.icones-font:before{
display: inline-block;
font-style: normal;
font-variant: normal;
margin-right: 10px;
font-family: "Font Awesome 5 Free";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.des:before{
content: "\f522";
}
Voici ce que va donner enfin l’icône au bout du compte avec tout ça :
Exemple d’utilisation d’icône Font-awesome
Conclusion
Le choix pour intégrer une police d’icônes va être fortement lié au projet et à l’utilisation qui va en être faite sur le site. Donc pour la question : « laquelle choisir ? », on se retrouve avec la même réponse énervante que d’habitude : « Ben ça dépend ! ».
- Font-awesome servira la plupart du temps pour beaucoup de sites. Depuis la version 5 le nombre d’icônes est quand même assez élevé pour trouver son bonheur. Les débuts peuvent être assez chaotiques mais une fois en place il est plutôt simple à utiliser pour peu qu’on connaisse les bases en HTML et CSS,
- Les SVG sont recommandés tant pour leur utilisation que pour leur apport niveau poid léger et manipulation en CSS. Mais si vous avez une bonne centaine d’icônes sur le site il va falloir être patient !
- Les sprites peuvent être utiles quand son ou sa graphiste préféré(e) vous a fait de super chouettes icônes et que vous souhaitez les utiliser. Du coup un mix entre « sprites » et fichier SVG est tout indiqué !
- Les images pour le coup peuvent être utilisées par-ci par-là mais s’agissant d’icônes ce serait souvent une mauvaise solution. En tout cas pour des images en format .png et .jpg.