Au début, les icônes étaient facilement accessibles, mais les implémenter efficacement dans WordPress était un peu plus difficile. On pouvait contourner certains problèmes avec les sprites, mais ce n’était pas toujours un bon moyen d’avancer, et quand les écrans rétina ont commencé à sortir, le problème s’est amplifié (littéralement).
L’une des solutions les plus courantes à ce problème est d’utiliser une police d’icônes. Les icônes sont des polices web ou des vecteurs, donc vous pouvez les mettre à l’échelle à l’infini et beaucoup d’icônes peuvent tenir dans un seul fichier, ce qui réduit considérablement le nombre de vos requêtes. Cela vous permet d’utiliser presque toutes les icônes que vous pouvez imaginer. Cependant, cela s’accompagne également de certaines considérations liées à la performance.
Nous vous montrerons dans cet article quelques façons différentes d’utiliser les polices d’icônes WordPress, où les obtenir, et quelle méthode pourrait être la meilleure pour votre site.
- Où trouver les polices d’icônes
- Façons simples et rapides d’utiliser les polices d’icônes
- Problème de performance à prendre en compte avec les polices d’icônes
- Héberger locallement des polices d’icônes (seulement celles dont vous avez besoin)
- Préoccupations relatives à l’accessibilité des polices d’icônes
Où trouver les polices d’icônes
Il y a beaucoup de bons endroits pour trouver des polices d’icônes pour votre site WordPress. Tapez simplement « icon font » dans Google et vous obtiendrez d’excellents résultats. L’une des plus populaires et des plus utilisées est Font Awesome. Au moment d’écrire ces lignes, il y a plus de 1400 icônes gratuites, ainsi que plus de 4500 icônes dans leur version pro. Cela inclut des icônes pour à peu près tout, de l’interface, du social, des flèches, et beaucoup d’autres types d’icônes.
En voici d’autres à vérifier :
- IcoMoon est un autre service populaire avec plus de 5 500 icônes vectorielles gratuites et plus de 4 000 icônes payantes. En fait, nous utiliserons leur outil de génération de polices d’icônes plus bas.
- Fontello est un autre excellent service qui vous aide à découvrir et à créer des polices d’icônes.
- Si vous recherchez un jeu d’icônes super léger, assurez-vous de tester Bytesize. Les 84 icônes mesurent toutes 9KB lorsque minifiées (2 Ko en SVGZ, ou Gzippé).
- Si vous voulez simplement utiliser les icônes SVG manuellement, vous ne trouverez pas de meilleure bibliothèque gratuite qu’iconmonstr ou une meilleure bibliothèque payante qu’Iconfinder.
Façons rapides et faciles d’utiliser les icônes de police WordPress
Tout d’abord, nous allons nous plonger dans quelques-unes des façons rapides et faciles d’utiliser les icônes de police WordPress. Un avertissement, ce ne sont pas toutes les meilleures en termes de performance. Pour cela, nous vous recommandons de passer à la section sur la meilleure méthode.
Option 1 – Utiliser un plugin WordPress
La façon la plus rapide de se familiariser avec les icônes de polices WordPress est d’utiliser une extension tierce. L’extension gratuite Font Awesome Integration contient la dernière bibliothèque d’icônes Font Awesome 5. Après l’avoir installée et activée, il suffit d’un simple code court pour insérer une icône. Ils ont même une icône WordPress maintenant ! Plutôt cool.
Vous pouvez consulter le tableau d’utilisation de base de Font Awesome 5 pour d’autres façons de l’utiliser et de le personnaliser, ainsi que leur bibliothèque d’icônes. Par exemple, ci-dessous, nous avons inséré l’icône WordPress Font Awesome dans un bloc de code court Gutenberg et ajouté fa-3x pour le rendre trois fois plus grand.
[fawesome iclass="fab fa-wordpress fa-3x"]
Voici à quoi cela ressemble dans l’interface publique. Plutôt facile, non ? Nous avons une icône Font Awesome sur notre site en quelques minutes seulement.
Si vous voulez beaucoup de codes cours faciles à utiliser, vous voudrez peut-être aussi consulter l’extension Shortcodes Ultimate. Ils ont un module d’icônes payantes que vous pouvez utiliser.
Ce qui précède est une excellente solution si vous voulez laisser vos clients ajouter des icônes aux articles ou aux pages, mais si vous voulez utiliser ces éléments dans votre thème ou votre extension, il est préférable de les mettre vous-même en file d’attente (nous y reviendrons ci-dessous).
Option 2 – Utiliser les dashicons intégrés
Dashicons est un ensemble d’icônes de polices incluses par défaut puisque WordPress l’utilise dans l’administration. Vous aurez besoin de le mettre en file d’attente sur l’interface publique, mais tout ce dont vous avez besoin est le nom du script, le fichier est déjà disponible pour WordPress.
Vous pouvez ajouter ce qui suit dans votre fichier functions.php, ou nous vous recommandons d’utiliser une extension gratuite comme Code Snippets. Cela minimise le risque de briser votre thème et les changements seront également conservés tout au long des mises à jour du thème.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Vous pouvez ensuite vous rendre sur le site de Dashicons, sélectionner une icône et cliquer sur le lien « copier HTML » qui vous donnera le code nécessaire pour afficher l’icône. Ils n’ont pas un grand choix, mais ils fonctionnent toujours très bien et sont très légers.
<span class="dashicons dashicons-admin-post"></span>Par exemple, ci-dessous, nous avons inséré l’icône du tableau de bord dans un bloc HTML de Gutenberg.
Voici à quoi cela ressemble sur l’interface publique.
Dashicons n’a pas de code court sympa, mais vous pouvez personnaliser la taille de vos icônes avec CSS. Voici un exemple d’insertion d’une icône juste avant un en-tête.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Option 3 – Lien manuel vers les polices d’icônes hébergées en externe
Votre troisième option est de créer manuellement un lien vers les polices d’icônes hébergées en externe. C’est essentiellement ce que l’extension de l’option 1 ci-dessus fait en arrière-plan.
Pour Font Awesome, vous pouvez récupérer le code depuis leur page d’accueil, puis suivre les étapes ci-dessous. Ils hébergent gratuitement pour vous toutes leurs polices sur un CDN. Cela ressemblera à quelque chose comme ça :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Étape 1
Copiez le code dans le <head> de chaque modèle ou page de votre site WordPress où vous voulez utiliser Font Awesome. Vous pouvez modifier le fichier header.php de votre thème ou mieux encore, suivez notre tutoriel simple pour savoir comment ajouter du code à votre en-tête.
Étape 2
Vous pouvez alors commencer à placer des icônes dans votre <body>. Trouvez la bonne icône et apprenez comment l’ajouter à votre page.
Problème de performance à prendre en compte lors de l’utilisation des polices d’icônes
Bien qu’il n’y ait rien de mal à utiliser l’une des méthodes ci-dessus pour ajouter des polices d’icônes à votre site, elles ne sont pas techniquement la meilleure façon. Pourquoi ? Tout se résume à des questions de performance.
Vous n’avez probablement pas besoin de toutes ces icônes
Tout d’abord, lorsque vous utilisez une extension pour les polices d’icônes ou un lien vers une bibliothèque de polices d’icônes externe, elle va charger toutes les icônes de toute sa bibliothèque. Si vous n’utilisez qu’une vingtaine d’icônes sur l’ensemble de votre site, cela peut être beaucoup mieux géré.
Par exemple, nous avons inclus la bibliothèque Font Awesome 5 sur notre site et bien que le fichier CSS soit petit, le fichier de police lui-même est de 108 Ko. Bien que cela puisse ne pas sembler si gros, vous verrez plus loin à quel point le fichier devient petit lorsque nous choisissons seulement les polices HTML que nous utilisons réellement.
Le chargement à partir d’un CDN est généralement plus rapide
Deuxièmement, il n’y a rien de mal à charger des scripts à partir de différents CDNs. Cependant, si vous avez l’option de le charger à partir d’un CDN, c’est généralement plus rapide. Pourquoi ? Parce qu’il peut tirer profit d’une seule connexion HTTP/2 et réduire les recherches DNS supplémentaires. Assurez-vous simplement que votre CDN principal est un bon CDN !
Héberger localement les polices d’icônes (uniquement celles dont vous avez besoin)
Pour les raisons de performance mentionnées ci-dessus, nous allons vous expliquer comment héberger vos polices d’icônes localement, ainsi que comment utiliser uniquement celles dont vous avez besoin. Par localement, nous entendons soit les charger à partir du serveur de votre hébergeur WordPress, soit à partir de votre propre CDN.
En choisissant uniquement les polices d’icônes dont vous avez besoin, vous pouvez réduire la taille du fichier de 100 Ko à quelques kilo-octets, très pratique ! Encore mieux : vous pouvez même mélanger et faire correspondre des icônes de différents jeux de polices.
Les basiques – Comment ça marche ?
L’utilisation d’une icône de police implique l’hébergement du fichier de police (WOFF, WOFF 2, etc.) sur votre serveur, puis l’utilisation de CSS pour charger la police, puis la création de balises pour ajouter les icônes à l’endroit correct.
Bien que votre site ne chargera qu’un seul fichier, vous aurez en fait un certain nombre de formats de fichiers pour chaque police puisque certains navigateurs utilisent des formats différents. Font Awesome a 6 formats de fichiers différents inclus : EOT, SVG, TTF, WOFF, WOFF, WOFF 2 et OTF. Cependant, sur la base de la prise en charge du navigateur, vous n’avez vraiment besoin que de WOFF ou WOFF 2.
Astuce : WOFF est supporté par 93%+ de tous les navigateurs modernes. Cependant, WOFF 2 est davantage compressé, mais n’est supporté que par 83%+ de tous les navigateurs modernes. Nous vous recommandons de choisir l’un ou l’autre ou les deux. Le navigateur déterminera en fonction de votre code celui à livrer au client.
Votre première tâche est d’utiliser un outil pour choisir seulement les icônes que vous voulez. Vous pouvez ensuite ajouter ces fichiers quelque part dans le répertoire de votre projet, généralement dans un répertoire de polices.
Ensuite, vous ajoutez le fichier CSS Font Awesome dans votre projet et l’ajoutez à votre site en utilisant un ancien élément de lien normal.
<link rel="stylesheet" href="css/font-awesome.min.css">Vous pouvez également mettre en file d’attente le fichier CSS ou, s’il est petit, l’utiliser simplement en ligne.
Si vous regardez le fichier CSS, vous pouvez voir ce qui se passe en arrière-plan. Les fichiers de polices sont chargés, l’élément de base avec la classe .fa est défini (avec d’autres), et enfin, chaque icône nommée est définie (ex : .fa-book).
La seule chose à laquelle vous devez faire attention, c’est le chemin d’accès à vos fichiers de polices. Par défaut, ils sont chargés à partir de ../fonts qui sera le répertoire des polices, un dossier plus haut que le fichier CSS actuel. Il se peut que vous deviez le modifier pour l’adapter à votre propre structure de répertoires.
Maintenant que vous avez une meilleure idée de son fonctionnement, nous allons vous expliquer comment procéder étape par étape. Dans cet exemple, nous utilisons un site de commerce électronique de production.
Étape 1
Tout d’abord, vous devez déterminer quelle bibliothèque d’icônes de polices vous voulez utiliser. Nous en avons partagé quelques-unes que nous aimons bien au début de cet article. Dans cet exemple, nous allons utiliser Font Awesome avec le générateur de polices IcoMoon. Si vous voulez les fichiers WOFF 2 d’IcoMoon, vous devez payer des frais uniques de 9 $ pour accéder à leur bibliothèque payante.
Vous pouvez télécharger gratuitement les icônes Font Awesome que vous voulez manuellement, mais vous auriez besoin d’utiliser un outil comme FontForge pour modifier manuellement leur fichier WOFF ou WOFF 2. Nous aimons que cela soit facile, donc nous utilisons un générateur.
Étape 2
Dirigez-vous vers le générateur IcoMoon. On clique sur « Ajouter » dans la bibliothèque Font Awesome.
Étape 3
Ensuite, vous devrez choisir les icônes que vous voulez utiliser sur votre site WordPress. Si vous utilisez déjà Font Awesome et que vous passez simplement à des versions hébergées localement, faites une courte liste et choisissez-les dans la bibliothèque.
Dans cet exemple, nous choisissons des icônes pour perfmatters.io, un site de eCommerce WordPress qui exécute Easy Digital Downloads.
Étape 4
Une fois que vous avez choisi toutes vos icônes, choisissez « Générer la police » en bas. Pour ce site, nous avons eu besoin de 20 icônes.
Vous obtiendrez des fichiers qui ressemblent à ceci. Les plus importants dont vous aurez besoin sont le fichier style.css et les fichiers de polices (WOFF, WOFF 2).
Étape 5
Ensuite, il est recommandé d’effectuer une recherche et un remplacement dans le fichier style.css avant de le téléverser/copier sur votre site. Voici à quoi ressemble l’original.
Pour ceux d’entre vous qui utilisent déjà Font Awesome, cela facilite simplement le passage des classes à Font Awesome, de cette façon s’il y avait déjà quelque chose codé sur votre site WordPress avec lui, il va automatiquement commencer à utiliser les icônes.
Faites donc une recherche pour « icône » et remplacez toutes les occurrences par « fa ». Vous devriez pouvoir faire une recherche rapide et remplacer par un éditeur de texte comme Sublime.
Ceci remplace [class^="icon-"], [class*=" icon-"] par [class^="fa-"], [class*=" fa-"]. Il corrige également chaque icône, ainsi au lieu de commencer par .icon-, ils commencent maintenant par .fa-.
Vous devrez peut-être également modifier l’URL source en fonction de l’endroit où vous mettez en ligne vos fichiers de polices à l’étape 7. Nous vous recommandons de changer l’URL de votre CDN.
Étape 6
Ensuite, vous devez ajouter le CSS à votre site. Il y a plusieurs façons de le faire.
Option 1
Comme la quantité de CSS est très petite, vous pouvez copier tout le CSS du fichier et le coller dans l’outil de personnalisation de WordPress. Ne faites jamais cela pour les gros fichiers, mais il s’agit d’une quantité relativement faible de CSS. Cela signifie qu’il se chargera en ligne sur votre site.
Option 2
Vous pouvez créer manuellement un lien vers votre feuille de style en la plaçant dans l’en-tête de votre site WordPress. Astuce : Connectez-le à votre propre CDN pour des performances plus rapides.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Option 3
Vous pouvez également mettre le fichier CSS en file d’attente dans WordPress. Le processus est très similaire à la méthode manuelle. Ajoutez ce qui suit au fichier functions.php de votre thème, ou utilisez l’extension gratuite Code Snippets. Vous devrez peut-être changer le répertoire en fonction de l’endroit où vous l’avez téléversé.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Étape 7
Maintenant que vous avez ajouté le CSS à votre site, il est temps de mettre en ligne les fichiers de polices. Vous pouvez placer les polices n’importe où, un dossier appelé « fonts » dans votre /public est très bien. Rappelez-vous cependant que le dossier source de votre fichier style.css doit correspondre.
Étape 8
Maintenant, votre site WordPress devrait avoir à la fois vos fichiers CSS et vos fichiers de polices accessibles. Ensuite, vous pouvez donc ajouter du balisage à votre site. Ceci n’est qu’un exemple d’ajout d’une icône de rouage.
<i class="fa fa-cog"></i>Vous pouvez voir un exemple de ce travail en direct sur perfmatters.io. Gardez à l’esprit que vous pouvez utiliser n’importe quel élément, pas seulement i. Vous pouvez également utiliser des éléments normaux span, en plus d’ajouter du CSS à vos classes personnalisées.
La vraie différence, c’est quand on regarde la différence de taille. Rappelez-vous, lorsque nous avons créé un lien vers la bibliothèque externe Font Awesome, la taille totale du fichier de police était de 108 Ko. Après avoir utilisé un générateur de polices et choisi uniquement les icônes Font Awesome dont nous avions besoin pour le site, le fichier de polices a été ramené à 2,6 Ko. La taille de notre fichier de police a diminué de 97,59% !
En plus de cela, il se charge maintenant depuis notre CDN, ce qui signifie qu’il n’y a pas de recherches DNS supplémentaires sur fontawesome.com.
Vous pouvez aussi utiliser cette même approche avec les icônes SVG, c’est juste légèrement différent.
Préoccupations relatives à l’accessibilité des polices d’icônes
L’un des inconvénients des polices d’icônes est leur horrible accessibilité. Les lecteurs d’écran peuvent les ignorer, ou pire encore, lire l’unicode ou le caractère lui-même. Ainsi, les personnes malvoyantes pourraient entendre « les favoris de l’étoile jaune » lorsqu’elles regardent votre élément de menu des favoris, ce qui n’est pas idéal. Vous devriez également tenir compte de ce qui se passe si les polices ne se chargent pas.
Idéalement, les icônes décoratives devraient simplement disparaître lorsqu’elles ne sont pas chargées et les icônes critiques devraient être remplacées par du texte s’il y a un problème.
Le problème d’accessibilité est assez facile à résoudre, utilisez simplement le paramètre aria-hidden="true" pour indiquer aux lecteurs d’écran qu’ils doivent se débarrasser de notre élément.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesDans une implémentation plus complète, vous pouvez également utiliser Modernizr pour tester le support des polices de caractères. Vous aurez besoin de modifier légèrement le CSS, voir l’excellent article Bulletproof Font Icons pour de plus amples informations.
Pour plus d’informations sur la création d’icônes critiques avec texte de repli, nous vous recommandons également de lire l’article ci-dessus, ils ont expliqué et résolu le problème le mieux possible, mais sa mise en œuvre est un peu en dehors de la portée de cet article.
Résumé
C’est tout ce qu’il y a à faire avec les polices d’icônes. Maintenant, vous connaissez deux ou trois façons différentes d’obtenir facilement des polices d’icônes sur votre site WordPress, ainsi que la meilleure façon de les implémenter quand il s’agit de performance.
Nous recommandons toujours d’utiliser un générateur de polices pour créer une police d’icônes composée uniquement des icônes que vous utilisez. Votre thème sera ainsi beaucoup plus épuré ! Si vous avez une bibliothèque ou un générateur préféré que nous n’avons pas mentionné, veuillez nous le faire savoir. Il y en a beaucoup ! Aussi, assurez-vous de lire notre guide détaillé sur les polices WordPress.
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire