O\u00f9 trouver les polices d\u2019ic\u00f4nes<\/h2>\n
Il y a beaucoup de bons endroits pour trouver des polices d\u2019ic\u00f4nes pour votre site WordPress. Tapez simplement \u00ab\u00a0icon font\u00a0\u00bb dans Google et vous obtiendrez d\u2019excellents r\u00e9sultats. L\u2019une des plus populaires et des plus utilis\u00e9es est Font Awesome<\/a>. Au moment d\u2019\u00e9crire ces lignes, il y a plus de 1400 ic\u00f4nes gratuites, ainsi que plus de 4500 ic\u00f4nes dans leur version pro. Cela inclut des ic\u00f4nes pour \u00e0 peu pr\u00e8s tout, de l\u2019interface, du social, des fl\u00e8ches, et beaucoup d\u2019autres types d\u2019ic\u00f4nes.<\/p>\n En voici d\u2019autres \u00e0 v\u00e9rifier :<\/p>\n Tout d\u2019abord, nous allons nous plonger dans quelques-unes des fa\u00e7ons rapides et faciles d\u2019utiliser les ic\u00f4nes de police WordPress. Un avertissement, ce ne sont pas toutes les meilleures en termes de performance. Pour cela, nous vous recommandons de passer \u00e0 la section sur la meilleure m\u00e9thode<\/a>.<\/p>\n La fa\u00e7on la plus rapide de se familiariser avec les ic\u00f4nes de polices WordPress est d\u2019utiliser une extension tierce. L\u2019extension gratuite Font Awesome Integration<\/a> contient la derni\u00e8re biblioth\u00e8que d\u2019ic\u00f4nes Font Awesome 5. Apr\u00e8s l\u2019avoir install\u00e9e et activ\u00e9e, il suffit d\u2019un simple code court pour ins\u00e9rer une ic\u00f4ne. Ils ont m\u00eame une ic\u00f4ne WordPress maintenant ! Plut\u00f4t cool.<\/p>\n Vous pouvez consulter le tableau d\u2019utilisation de base<\/a> de Font Awesome 5 pour d\u2019autres fa\u00e7ons de l\u2019utiliser et de le personnaliser, ainsi que leur biblioth\u00e8que d\u2019ic\u00f4nes. Par exemple, ci-dessous, nous avons ins\u00e9r\u00e9 l\u2019ic\u00f4ne WordPress Font Awesome dans un bloc de code court Gutenberg<\/a> et ajout\u00e9 Voici \u00e0 quoi cela ressemble dans l\u2019interface publique. Plut\u00f4t facile, non ? Nous avons une ic\u00f4ne Font Awesome sur notre site en quelques minutes seulement.<\/p>\n Si vous voulez beaucoup de codes cours faciles \u00e0 utiliser, vous voudrez peut-\u00eatre aussi consulter l\u2019extension Shortcodes Ultimate<\/a>. Ils ont un module d\u2019ic\u00f4nes payantes que vous pouvez utiliser.<\/p>\n Ce qui pr\u00e9c\u00e8de est une excellente solution si vous voulez laisser vos clients ajouter des ic\u00f4nes aux articles ou aux pages, mais si vous voulez utiliser ces \u00e9l\u00e9ments dans votre th\u00e8me ou votre extension, il est pr\u00e9f\u00e9rable de les mettre vous-m\u00eame en file d\u2019attente (nous y reviendrons ci-dessous).<\/p>\n Dashicons<\/a> est un ensemble d\u2019ic\u00f4nes de polices incluses par d\u00e9faut puisque WordPress l\u2019utilise dans l\u2019administration. Vous aurez besoin de le mettre en file d\u2019attente sur l\u2019interface publique, mais tout ce dont vous avez besoin est le nom du script, le fichier est d\u00e9j\u00e0 disponible pour WordPress.<\/p>\n Vous pouvez ajouter ce qui suit dans votre fichier Vous pouvez ensuite vous rendre sur le site de Dashicons<\/a>, s\u00e9lectionner une ic\u00f4ne et cliquer sur le lien \u00ab\u00a0copier HTML\u00a0\u00bb qui vous donnera le code n\u00e9cessaire pour afficher l\u2019ic\u00f4ne. Ils n\u2019ont pas un grand choix, mais ils fonctionnent toujours tr\u00e8s bien et sont tr\u00e8s l\u00e9gers.<\/p>\n Par exemple, ci-dessous, nous avons ins\u00e9r\u00e9 l\u2019ic\u00f4ne du tableau de bord dans un bloc HTML de Gutenberg.<\/a><\/p>\n Voici \u00e0 quoi cela ressemble sur l\u2019interface publique.<\/p>\n Dashicons n\u2019a pas de code court sympa, mais vous pouvez personnaliser la taille de vos ic\u00f4nes avec CSS<\/a>. Voici un exemple d\u2019insertion d\u2019une ic\u00f4ne juste avant un en-t\u00eate.<\/p>\n Votre troisi\u00e8me option est de cr\u00e9er manuellement un lien vers les polices d\u2019ic\u00f4nes h\u00e9berg\u00e9es en externe. C\u2019est essentiellement ce que l\u2019extension de l\u2019option 1 ci-dessus fait en arri\u00e8re-plan.<\/p>\n Pour Font Awesome, vous pouvez r\u00e9cup\u00e9rer le code depuis leur page d\u2019accueil,<\/a> puis suivre les \u00e9tapes ci-dessous. Ils h\u00e9bergent gratuitement pour vous toutes leurs polices sur un CDN<\/a>. Cela ressemblera \u00e0 quelque chose comme \u00e7a :<\/p>\n \u00c9tape 1<\/strong><\/p>\n Copiez le code dans le \u00c9tape 2<\/strong><\/p>\n Vous pouvez alors commencer \u00e0 placer des ic\u00f4nes dans votre Bien qu\u2019il n\u2019y ait rien de mal \u00e0 utiliser l\u2019une des m\u00e9thodes ci-dessus pour ajouter des polices d\u2019ic\u00f4nes \u00e0 votre site, elles ne sont pas techniquement la meilleure fa\u00e7on. Pourquoi ? Tout se r\u00e9sume \u00e0 des questions de performance<\/b>.<\/p>\n Tout d\u2019abord, lorsque vous utilisez une extension pour les polices d\u2019ic\u00f4nes ou un lien vers une biblioth\u00e8que de polices d\u2019ic\u00f4nes externe, elle va charger toutes les ic\u00f4nes de toute sa biblioth\u00e8que. Si vous n\u2019utilisez qu\u2019une vingtaine d\u2019ic\u00f4nes sur l\u2019ensemble de votre site, cela peut \u00eatre beaucoup mieux g\u00e9r\u00e9.<\/p>\n\n Par exemple, nous avons inclus la biblioth\u00e8que Font Awesome 5 sur notre site et bien que le fichier CSS soit petit, le fichier de police lui-m\u00eame est de 108 Ko. Bien que cela puisse ne pas sembler si gros, vous verrez plus loin \u00e0 quel point le fichier devient petit lorsque nous choisissons seulement les polices HTML<\/a> que nous utilisons r\u00e9ellement.<\/p>\n Deuxi\u00e8mement, il n\u2019y a rien de mal \u00e0 charger des scripts \u00e0 partir de diff\u00e9rents CDNs. Cependant, si vous avez l\u2019option de le charger \u00e0 partir d\u2019un CDN, c\u2019est g\u00e9n\u00e9ralement plus rapide. Pourquoi ? Parce qu\u2019il peut tirer profit d\u2019une seule connexion HTTP\/2<\/a> et r\u00e9duire les recherches DNS<\/a> suppl\u00e9mentaires. Assurez-vous simplement que votre CDN principal est un bon CDN !<\/p>\n Pour les raisons de performance mentionn\u00e9es ci-dessus, nous allons vous expliquer comment h\u00e9berger vos polices d\u2019ic\u00f4nes localement, ainsi que comment utiliser uniquement celles dont vous avez besoin. Par localement, nous entendons soit les charger \u00e0 partir du serveur de votre h\u00e9bergeur WordPress, soit \u00e0 partir de votre propre CDN.<\/p>\n En choisissant uniquement les polices d\u2019ic\u00f4nes dont vous avez besoin, vous pouvez r\u00e9duire la taille du fichier de 100 Ko \u00e0 quelques kilo-octets<\/b>, tr\u00e8s pratique ! Encore mieux : vous pouvez m\u00eame m\u00e9langer et faire correspondre des ic\u00f4nes de diff\u00e9rents jeux de polices.<\/p>\n L\u2019utilisation d\u2019une ic\u00f4ne de police implique l\u2019h\u00e9bergement du fichier de police (WOFF, WOFF 2, etc.) sur votre serveur, puis l\u2019utilisation de CSS<\/a> pour charger la police, puis la cr\u00e9ation de balises pour ajouter les ic\u00f4nes \u00e0 l\u2019endroit correct.<\/p>\n Bien que votre site ne chargera qu\u2019un seul fichier, vous aurez en fait un certain nombre de formats de fichiers pour chaque police puisque certains navigateurs utilisent des formats diff\u00e9rents. Font Awesome a 6 formats de fichiers diff\u00e9rents inclus : EOT, SVG, TTF, WOFF, WOFF, WOFF 2 et OTF. Cependant, sur la base de la prise en charge du navigateur, vous n\u2019avez vraiment besoin que de WOFF ou WOFF 2.<\/p>\n Astuce : WOFF est support\u00e9<\/a> par 93%+ de tous les navigateurs modernes. Cependant, WOFF 2 est davantage compress\u00e9, mais n\u2019est support\u00e9<\/a> que par 83%+ de tous les navigateurs modernes. Nous vous recommandons de choisir l\u2019un ou l\u2019autre ou les deux. Le navigateur d\u00e9terminera en fonction de votre code celui \u00e0 livrer au client.<\/p>\n Votre premi\u00e8re t\u00e2che est d\u2019utiliser un outil pour choisir seulement les ic\u00f4nes que vous voulez. Vous pouvez ensuite ajouter ces fichiers quelque part dans le r\u00e9pertoire de votre projet, g\u00e9n\u00e9ralement dans un r\u00e9pertoire de polices.<\/p>\n Ensuite, vous ajoutez le fichier CSS Font Awesome dans votre projet et l\u2019ajoutez \u00e0 votre site en utilisant un ancien \u00e9l\u00e9ment de lien normal.<\/p>\n Vous pouvez \u00e9galement mettre en file d\u2019attente le fichier CSS ou, s\u2019il est petit, l\u2019utiliser simplement en ligne.<\/p>\n Si vous regardez le fichier CSS, vous pouvez voir ce qui se passe en arri\u00e8re-plan. Les fichiers de polices sont charg\u00e9s, l\u2019\u00e9l\u00e9ment de base avec la classe La seule chose \u00e0 laquelle vous devez faire attention, c\u2019est le chemin d\u2019acc\u00e8s \u00e0 vos fichiers de polices. Par d\u00e9faut, ils sont charg\u00e9s \u00e0 partir de Maintenant que vous avez une meilleure id\u00e9e de son fonctionnement, nous allons vous expliquer comment proc\u00e9der \u00e9tape par \u00e9tape. Dans cet exemple, nous utilisons un site de commerce \u00e9lectronique de production.<\/p>\n Tout d\u2019abord, vous devez d\u00e9terminer quelle biblioth\u00e8que d\u2019ic\u00f4nes de polices vous voulez utiliser. Nous en avons partag\u00e9 quelques-unes que nous aimons bien au d\u00e9but de cet article. Dans cet exemple, nous allons utiliser Font Awesome avec le g\u00e9n\u00e9rateur de polices IcoMoon<\/a>. Si vous voulez les fichiers WOFF 2 d\u2019IcoMoon, vous devez payer des frais uniques de 9 $ pour acc\u00e9der \u00e0 leur biblioth\u00e8que payante.<\/p>\n Vous pouvez t\u00e9l\u00e9charger gratuitement les ic\u00f4nes Font Awesome que vous voulez manuellement, mais vous auriez besoin d\u2019utiliser un outil comme FontForge<\/a> pour modifier manuellement leur fichier WOFF ou WOFF 2. Nous aimons que cela soit facile, donc nous utilisons un g\u00e9n\u00e9rateur.<\/p>\n Dirigez-vous vers le g\u00e9n\u00e9rateur IcoMoon<\/a>. On clique sur \u00ab\u00a0Ajouter\u00a0\u00bb dans la biblioth\u00e8que Font Awesome.<\/p>\n Ensuite, vous devrez choisir les ic\u00f4nes que vous voulez utiliser sur votre site WordPress. Si vous utilisez d\u00e9j\u00e0 Font Awesome et que vous passez simplement \u00e0 des versions h\u00e9berg\u00e9es localement, faites une courte liste et choisissez-les dans la biblioth\u00e8que.<\/p>\n Dans cet exemple, nous choisissons des ic\u00f4nes pour perfmatters.io<\/a>, un site de eCommerce WordPress qui ex\u00e9cute Easy Digital Downloads.<\/p>\n Une fois que vous avez choisi toutes vos ic\u00f4nes, choisissez \u00ab\u00a0G\u00e9n\u00e9rer la police\u00a0\u00bb en bas. Pour ce site, nous avons eu besoin de 20 ic\u00f4nes.<\/p>\n Vous obtiendrez des fichiers qui ressemblent \u00e0 ceci. Les plus importants dont vous aurez besoin sont le fichier Ensuite, il est recommand\u00e9 d\u2019effectuer une recherche et un remplacement dans le fichier Pour ceux d\u2019entre vous qui utilisent d\u00e9j\u00e0 Font Awesome, cela facilite simplement le passage des classes \u00e0 Font Awesome, de cette fa\u00e7on s\u2019il y avait d\u00e9j\u00e0 quelque chose cod\u00e9 sur votre site WordPress avec lui, il va automatiquement commencer \u00e0 utiliser les ic\u00f4nes.<\/p>\n Faites donc une recherche pour \u00ab\u00a0ic\u00f4ne\u00a0\u00bb et remplacez toutes les occurrences par \u00ab\u00a0fa\u00a0\u00bb. Vous devriez pouvoir faire une recherche rapide et remplacer par un \u00e9diteur de texte comme Sublime<\/a>.<\/p>\n Ceci remplace Vous devrez peut-\u00eatre \u00e9galement modifier l\u2019URL source en fonction de l\u2019endroit o\u00f9 vous mettez en ligne vos fichiers de polices \u00e0 l\u2019\u00e9tape 7. Nous vous recommandons de changer l\u2019URL de votre CDN.<\/b><\/p>\n Ensuite, vous devez ajouter le CSS \u00e0 votre site. Il y a plusieurs fa\u00e7ons de le faire.<\/p>\n Option 1<\/strong><\/p>\n Comme la quantit\u00e9 de CSS est tr\u00e8s petite, vous pouvez copier tout le CSS du fichier et le coller dans l\u2019outil de personnalisation de WordPress. Ne faites jamais cela pour les gros fichiers, mais il s\u2019agit d\u2019une quantit\u00e9 relativement faible de CSS. Cela signifie qu\u2019il se chargera en ligne sur votre site.<\/p>\n Option 2<\/strong><\/p>\n Vous pouvez cr\u00e9er manuellement un lien vers votre feuille de style en la pla\u00e7ant dans l\u2019en-t\u00eate de votre site WordPress. Astuce : Connectez-le \u00e0 votre propre CDN pour des performances plus rapides.<\/p>\n Option 3<\/strong><\/p>\n Vous pouvez \u00e9galement mettre le fichier CSS en file d\u2019attente dans WordPress. Le processus est tr\u00e8s similaire \u00e0 la m\u00e9thode manuelle. Ajoutez ce qui suit au fichier Maintenant que vous avez ajout\u00e9 le CSS \u00e0 votre site, il est temps de mettre en ligne les fichiers de polices. Vous pouvez placer les polices n\u2019importe o\u00f9, un dossier appel\u00e9 \u00ab\u00a0fonts\u00a0\u00bb dans votre \/public est tr\u00e8s bien. Rappelez-vous cependant que le dossier source de votre fichier Maintenant, votre site WordPress devrait avoir \u00e0 la fois vos fichiers CSS et vos fichiers de polices accessibles. Ensuite, vous pouvez donc ajouter du balisage \u00e0 votre site. Ceci n\u2019est qu\u2019un exemple d\u2019ajout d\u2019une ic\u00f4ne de rouage.<\/p>\n Vous pouvez voir un exemple de ce travail en direct sur perfmatters.io<\/a>. Gardez \u00e0 l\u2019esprit que vous pouvez utiliser n\u2019importe quel \u00e9l\u00e9ment, pas seulement La vraie diff\u00e9rence, c\u2019est quand on regarde la diff\u00e9rence de taille. Rappelez-vous, lorsque nous avons cr\u00e9\u00e9 un lien vers la biblioth\u00e8que externe Font Awesome, la taille totale du fichier de police \u00e9tait de 108 Ko. Apr\u00e8s avoir utilis\u00e9 un g\u00e9n\u00e9rateur de polices et choisi uniquement les ic\u00f4nes Font Awesome dont nous avions besoin pour le site, le fichier de polices a \u00e9t\u00e9 ramen\u00e9 \u00e0 2,6 Ko. La taille de notre fichier de police a diminu\u00e9 de 97,59% !<\/b><\/p>\n En plus de cela, il se charge maintenant depuis notre CDN, ce qui signifie qu\u2019il n\u2019<\/b>y a pas de recherches DNS suppl\u00e9mentaires sur<\/b> fontawesome.com.<\/p>\n\n Vous pouvez aussi utiliser cette m\u00eame approche avec les ic\u00f4nes SVG, c\u2019est juste l\u00e9g\u00e8rement diff\u00e9rent.<\/p>\n L\u2019un des inconv\u00e9nients des polices d\u2019ic\u00f4nes est leur horrible accessibilit\u00e9<\/a>. Les lecteurs d\u2019\u00e9cran peuvent les ignorer, ou pire encore, lire l\u2019unicode ou le caract\u00e8re lui-m\u00eame. Ainsi, les personnes malvoyantes pourraient entendre \u00ab\u00a0les favoris de l\u2019\u00e9toile jaune\u00a0\u00bb lorsqu\u2019elles regardent votre \u00e9l\u00e9ment de menu des favoris, ce qui n\u2019est pas id\u00e9al. Vous devriez \u00e9galement tenir compte de ce qui se passe si les polices ne se chargent pas.<\/p>\n Id\u00e9alement, les ic\u00f4nes d\u00e9coratives devraient simplement dispara\u00eetre lorsqu\u2019elles ne sont pas charg\u00e9es et les ic\u00f4nes critiques devraient \u00eatre remplac\u00e9es par du texte s\u2019il y a un probl\u00e8me.<\/p>\n Le probl\u00e8me d\u2019accessibilit\u00e9 est assez facile \u00e0 r\u00e9soudre, utilisez simplement le param\u00e8tre Dans une impl\u00e9mentation plus compl\u00e8te, vous pouvez \u00e9galement utiliser Modernizr pour tester le support des polices de caract\u00e8res. Vous aurez besoin de modifier l\u00e9g\u00e8rement le CSS, voir l\u2019excellent article Bulletproof Font Icons<\/a> pour de plus amples informations.<\/p>\n Pour plus d\u2019informations sur la cr\u00e9ation d\u2019ic\u00f4nes critiques avec texte de repli, nous vous recommandons \u00e9galement de lire l\u2019article ci-dessus, ils ont expliqu\u00e9 et r\u00e9solu le probl\u00e8me le mieux possible, mais sa mise en \u0153uvre est un peu en dehors de la port\u00e9e de cet article.<\/p>\n C\u2019est tout ce qu\u2019il y a \u00e0 faire avec les polices d\u2019ic\u00f4nes. Maintenant, vous connaissez deux ou trois fa\u00e7ons diff\u00e9rentes d\u2019obtenir facilement des polices d\u2019ic\u00f4nes sur votre site WordPress, ainsi que la meilleure fa\u00e7on de les impl\u00e9menter quand il s\u2019agit de performance.<\/p>\n![\"Ic\u00f4nes](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/icones-font-awesome.png\")
\n
Fa\u00e7ons rapides et faciles d\u2019utiliser les ic\u00f4nes de police WordPress<\/h2>\n
Option 1 – Utiliser un plugin WordPress<\/h3>\n
fa-3x<\/code> pour le rendre trois fois plus grand.<\/p>\n[fawesome iclass=\"fab fa-wordpress fa-3x\"]<\/code><\/pre>\n![\"Code](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/code-court-font-awesome-gutenberg.png\")
![\"Exemple](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/font-awesome-wordpress-5.0-1.png\")
Option 2 – Utiliser les dashicons int\u00e9gr\u00e9s<\/h3>\n
functions.php<\/code>, ou nous vous recommandons d\u2019utiliser une extension gratuite comme Code Snippets<\/a>. Cela minimise le risque de briser votre th\u00e8me et les changements seront \u00e9galement conserv\u00e9s tout au long des mises \u00e0 jour du th\u00e8me.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'dashicons' );\n}<\/code><\/pre>\n<span class=\"dashicons dashicons-admin-post\"><\/span><\/code><\/pre>\n![\"Dashicons](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/gutenberg-dashicons.png\")
![\"Exemple](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/dashicons-wordpress.png\")
<h2 class=\"dashicons-before dashicons-smiley\">My Cool Headline<\/h2><\/code><\/pre>\nOption 3 – Lien manuel vers les polices d\u2019ic\u00f4nes h\u00e9berg\u00e9es en externe<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/use.fontawesome.com\/releases\/v5.5.0\/css\/all.css\" integrity=\"sha384-xxxxx\" crossorigin=\"anonymous\"><\/code><\/pre>\n<head><\/code> de chaque mod\u00e8le ou page de votre site WordPress o\u00f9 vous voulez utiliser Font Awesome. Vous pouvez modifier le fichier header.php<\/code> de votre th\u00e8me ou mieux encore, suivez notre tutoriel simple pour savoir comment ajouter du code \u00e0 votre en-t\u00eate<\/a>.<\/p>\n<body><\/code>. Trouvez la bonne ic\u00f4ne<\/a> et apprenez comment l\u2019ajouter \u00e0 votre page<\/a>.<\/p>\nProbl\u00e8me de performance \u00e0 prendre en compte lors de l\u2019utilisation des polices d\u2019ic\u00f4nes<\/h2>\n
Vous n\u2019avez probablement pas besoin de toutes ces ic\u00f4nes<\/h3>\n
![\"Grande](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/grande-bibliotheque-polices-font-awesome.png\")
Le chargement \u00e0 partir d\u2019un CDN est g\u00e9n\u00e9ralement plus rapide<\/h3>\n
H\u00e9berger localement les polices d\u2019ic\u00f4nes (uniquement celles dont vous avez besoin)<\/h2>\n
Les basiques – Comment \u00e7a marche ?<\/h3>\n
<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\"><\/code><\/pre>\n.fa<\/code> est d\u00e9fini (avec d\u2019autres), et enfin, chaque ic\u00f4ne nomm\u00e9e est d\u00e9finie (ex : .fa-book).<\/p>\n..\/fonts<\/code> qui sera le r\u00e9pertoire des polices, un dossier plus haut que le fichier CSS actuel. Il se peut que vous deviez le modifier pour l\u2019adapter \u00e0 votre propre structure de r\u00e9pertoires.<\/p>\n\u00c9tape 1<\/h3>\n
\u00c9tape 2<\/h3>\n
![\"Biblioth\u00e8que](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/bibliotheque-icomoon-font-awesome-1.png\")
\u00c9tape 3<\/h3>\n
![\"Choisissez](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/choisissez-icones-font-awesome.png\")
\u00c9tape 4<\/h3>\n
![\"Ic\u00f4nes](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/icones-font-awesome-depuis-exportation-icomoon.png\")
style.css<\/code> et les fichiers de polices (WOFF, WOFF 2).<\/p>\n![\"Fichiers](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/fichiers-icones.png\")
\u00c9tape 5<\/h3>\n
style.css<\/code> avant de le t\u00e9l\u00e9verser\/copier sur votre site. Voici \u00e0 quoi ressemble l\u2019original.<\/p>\n![\"Fichier](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/fichier-css-icomoon.png\")
![\"Trouver](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/trouver-remplacer-sublime.png\")
[class^=\"icon-\"], [class*=\" icon-\"]<\/code> par\u00a0[class^=\"fa-\"], [class*=\" fa-\"]<\/code>. Il corrige \u00e9galement chaque ic\u00f4ne, ainsi au lieu de commencer par .icon-<\/code>, ils commencent maintenant par .fa-<\/code>.<\/p>\n\u00c9tape 6<\/h3>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdn.yourdomain.com\/fonts\/style.css\"><\/code><\/pre>\nfunctions.php<\/code> de votre th\u00e8me, ou utilisez l\u2019extension gratuite Code Snippets<\/a>. Vous devrez peut-\u00eatre changer le r\u00e9pertoire en fonction de l\u2019endroit o\u00f9 vous l\u2019avez t\u00e9l\u00e9vers\u00e9.<\/p>\nfunction my_theme_styles() {\nwp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '\/css\/style.css' );\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_theme_styles' );<\/code><\/pre>\n\u00c9tape 7<\/h3>\n
style.css<\/code> doit correspondre.<\/p>\n![\"Fichiers](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/fichiers-polices-icones-sftp.png\")
\u00c9tape 8<\/h3>\n
<i class=\"fa fa-cog\"><\/i><\/code><\/pre>\ni<\/code>. Vous pouvez \u00e9galement utiliser des \u00e9l\u00e9ments normaux\u00a0<\/span> span<\/code>, en plus d\u2019ajouter du CSS \u00e0 vos classes personnalis\u00e9es.<\/p>\n![\"Font](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/font-awesome-example-perfmatters.png\")
![\"Taille](\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2015\/10\/taille-fichier-woff-2-font-awesome.png\")
Pr\u00e9occupations relatives \u00e0 l\u2019accessibilit\u00e9 des polices d\u2019ic\u00f4nes<\/h2>\n
aria-hidden=\"true\"<\/code> pour indiquer aux lecteurs d\u2019\u00e9cran qu\u2019ils doivent se d\u00e9barrasser de notre \u00e9l\u00e9ment.<\/p>\n<span class=\"icon icon-star\" aria-hidden=\"true\"><\/span> My Favourites<\/code><\/pre>\nR\u00e9sum\u00e9<\/h2>\n