WordPress
time_read23mn de lecture

Comment télécharger des icônes WordPress ?

22 juillet 2022

Comment télécharger des icônes WordPress ?

Vous voulez télécharger des icônes WordPress ? Vous avez besoin de personnaliser votre site WordPress pour le rendre plus attrayant ?

Les polices d’icônes vous permettent d’ajouter des icônes vectorielles (redimensionnables) sans ralentir votre site web, ce qui est l’idéal pour créer un site responsive (adapté aux mobiles). 😁 Les polices Web peuvent être montées et conçues avec CSS.

Dans cet article, vous allez découvrir étape par étape, comment télécharger facilement une police d’icônes dans votre thème WordPress.

Quelles sont les icônes de site web ?

Les polices d’icônes sont des polices de caractères contenant des symboles et des pictogrammes, au lieu de lettres et de symboles ordinaires. Elles permettent d’afficher des icônes (de petites images) couramment utilisées.

icones médias sociaux

Les boutons de médias sociaux sont des exemples de polices d’icônes que l’on trouve sur presque tous les sites Web ou blogs. Lorsque vous êtes sur le point de partager quelque chose d’un site Web sur votre compte Facebook, vous cliquez sur la police d’icônes Facebook. Avant l’existence des polices d’icônes, toutes les icônes et sprites Web étaient des images. Comme les images ne sont pas extensibles et ne sont pas responsives, elles peuvent ralentir le temps de chargement des pages et les rendre inaccessibles pour certains publics. Les polices d’icônes sont donc apparues comme une alternative qui fonctionne sur tous les écrans et pèse beaucoup moins lourd.

Quels sont les avantages d’utiliser les polices d’icônes ?

Contrairement aux visuels traditionnels, les polices d’icônes présentent plusieurs avantages.

En tant qu’images vectorielles, elles peuvent être mises à l’échelle à n’importe quelle taille sans perte en qualité. C’est idéal pour le responsive design.

responsive design

Aucun JavaScript n’est requis et l’icône est considérée comme un texte. La police est en fait illisible et chaque lettre qui la compose est un symbole. Il n’est plus nécessaire de charger des sprites d’images ou des centaines de JPG/PNG pour afficher ces petits visuels.

Comme tout autre texte web, les polices d’icônes peuvent être facilement manipulées avec CSS. Vous pouvez, par exemple, modifier la taille et la couleur, ajouter des ombres portées, effectuer une rotation et bien plus encore.

De nombreux symboles peuvent être stockés dans un seul fichier. Cela réduit les demandes HTTP par rapport au chargement de plusieurs images.

Les polices d’icônes n’augmentent pas sensiblement la taille des pages, surtout si l’on utilise une bibliothèque ne contenant que les icônes nécessaires. Ce qui est une bonne nouvelle pour les temps de chargement des pages.

Les polices d’icônes sont des images vectorielles. Elles sont donc extensibles à l’infini.

Elles constituent une excellente caractéristique pour le responsive design, car vous pouvez facilement manipuler les polices d’icônes en fonction de vos besoins. Il existe des tonnes d’options de personnalisation, changer la taille et la couleur des icônes, les faire pivoter, ajouter des effets et bien plus encore. Tout cela peut se faire simplement via CSS, sans aucune perte de qualité visuelle.

Elles sont simples et relativement faciles à mettre en œuvre. En outre, les polices d’icônes vous permettent également de stocker de nombreux symboles dans un seul fichier. Cela peut réduire le nombre de requêtes HTTP.

Même s’il existe d’autres options pour télécharger des icônes WordPress, les polices d’icônes sont toujours largement utilisées car vous pouvez facilement trouver des polices d’icônes gratuites ou même concevoir les vôtres pour les utiliser sur votre site Web.

Les polices d’icônes gratuites

Il existe plusieurs sources de polices d’icônes gratuites disponibles pour votre site WordPress. Vous pouvez simplement rechercher « icon font » sur Google. IcoFont, Font Awesome, We Love Icon Fonts, et IcoMoon sont les plateformes les plus recommandées.

IcoFont télécharger icones WordPress

IcoFont est l’une des plus grandes sources de polices d’icônes gratuites. Elle fournit plus de 2100 icônes dans une seule police, classées en 30 catégories. Il vous permet également de générer votre propre pack d’icônes personnalisé.

Vous pouvez simplement télécharger des icônes WordPress à partir du site d’IcoFont, soit en copiant le code HTML, soit en cliquant sur le bouton de téléchargement dans la navigation du site.

Il suffit de parcourir les icônes que vous avez sélectionnées, de les ajouter à votre collection et de les télécharger. Après le téléchargement, vous obtiendrez un fichier zip composé de CSS, d’exemples et de polices. Les extraits HTML des icônes téléchargées sont associés à leur Unicode dans le dossier des exemples.

We Love Icon Fonts

Si vous souhaitez les utiliser directement sur le Web, vous pouvez copier l’ensemble du répertoire IcoFont dans votre dossier de projet. Veillez à faire référence à l’emplacement de votre icofont.min.css dans l’en-tête. Une autre source largement utilisée de polices d’icônes est Font Awesome. Elle fournit plus de 1500 icônes gratuites et plus de 5000 icônes en version pro qui couvrent plus de 70 types d’icônes avec quatre styles principaux : solide, régulier, léger, marques. We Love Icon Fonts est une autre source qui vous permet de créer vos propres icônes à l’aide de leur créateur de polices. Vous pouvez simplement cliquer sur « Ajouter » et obtenir un code intégrable qui peut être utilisé pour personnaliser votre collection par le biais de CSS. Enfin, IcoMoon fournit plus de 5 500 icônes vectorielles gratuites et plus de 4 000 icônes premium. Vous pouvez également créer votre propre police IcoMoon et télécharger votre propre fichier SVG à l’aide de la fonction d’importation.

Les moyens les plus rapides de télécharger des icônes WordPress

Vous pouvez utiliser les icônes de police sur votre site WordPress manuellement en copiant le code intégré ou en utilisant d’autres options. Indépendamment des problèmes de performance, l’utilisation des plugins WordPress et des Dashicons intégrés est le moyen le plus rapide et le plus facile d’utiliser les icônes de police WordPress.

Télécharger des icônes WordPress à l’aide d’un plugin

Utilisation du plugin fawesome

L’utilisation d’un plugin WordPress est le moyen le plus simple d’ajouter une police d’icônes à votre site WordPress sans avoir à modifier le code. Tout d’abord, vous devez installer et activer le plugin gratuit Font Awesome Integration. Après avoir fini de l’installer et de l’activer, vous pouvez commencer à ajouter des icônes de police avec leur shortcode – [fawesome].

Il y a quatre attributs dans le shortcode :

  • target – cible de la balise ‘a’.
  • href – lien à utiliser dans la balise ‘a’.
  • iclass – classes à utiliser dans le tag /i/
  • aclass – classes à utiliser dans la balise ‘a’.

Créez une icône qui pointera vers le site Web de WordPress.

Vous devrez placer le code de l’icône – (fa-wordpres) – dans la balise iclass et le lien http://wordpress.com/ dans la balise ahref :

[fawesome iclass="fab fa-wordpress" ahref="https://wordpress.com"]

Notez que dans cet exemple, on ajoute le préfixe « fab » à l’iclass. Il faudra couvrir les préfixes de style plus tard, en vous fournissant un « cheat sheet ».

Vous pouvez également vous rendre directement dans le répertoire des icônes de Font Awesome et vérifier le code de l’icône que vous souhaitez utiliser. Pour ce faire, cliquez sur l’icône et « copiez-collez » le code dans la partie prévue du contenu de votre site web.

Utilisez une icône WordPress gratuite disponible sur Font Awesome et placez-la sur un article WordPress à titre d’exemple.

Tout d’abord, copiez simplement le code d’icône WordPress choisi à partir de Font Awesome :

<i class="fab fa-wordpress"></i>

Ensuite, placez-le dans l’éditeur de blocs WordPress sur le bloc HTML, il ressemblera à ceci : Voici à quoi il ressemble lorsqu’il est prévisualisé :

En dehors de cet exemple, vous pouvez toujours le personnaliser en fonction des besoins de votre projet, en définissant manuellement des éléments : couleur, taille, etc.

Voici un exemple de code pour modifier la couleur et la taille d’une icône :

Gardez à l’esprit que pour référencer une icône, il faut utiliser <i> et <span> pour lancer la commande. De plus, chaque nom d’icône a un préfixe de style.

Voici comment la commande a été ordonnée :

<i class="style_prefix fa-icon name"></i>

ou,

<span="style_prefix fa-icon_name"></span>

Télécharger des icônes WordPress à l’aide des Dashicons

Indépendamment des polices d’icônes open source disponibles sur Internet, WordPress dispose en fait de Dashicons, un pack de polices d’icônes intégré par défaut pour chaque site WordPress. Il a été introduit avec WordPress 3.8.

Dashicons fournit des icônes de police, allant du menu d’administration, de l’écran d’accueil, des formats d’articles, des médias, de l’édition d’images, de TinyMCE, de l’écran d’affichage, du tri, du social, des produits, des taxonomies, des widgets, des notifications, des spécificités de WordPress.org, et bien plus encore.

Ces icônes peuvent être utilisées pour personnaliser vos propres plugins, thèmes, icônes de type de post, et autres éléments sur votre site. Comme il est équipé sur votre WordPress, il est totalement facile à utiliser.

Code Snippets

Vous pouvez le faire en ajoutant le code à votre fichier functions.php, ce qui prend beaucoup de temps lorsque c’est fait manuellement. Au lieu de cela, vous pouvez simplement utiliser un plugin gratuit comme Code Snippets pour configurer les Dashicons sans avoir besoin de configurer le fichier functions.php.

Avec cela, vous pouvez aller sur le site web de Dashicons et choisir celui que vous voulez utiliser. Pour l’intégrer sur votre site, vous pouvez cliquer sur le lien « Copy HTML », et vous obtenez le code – il suffit de le copier et de le coller dans votre élément WordPress.

Pour personnaliser davantage les Dashicons, vous pouvez utiliser les CSS.

Conclusion

Comme vous pouvez le constater, les polices d’icônes peuvent être une excellente alternative pour remplacer les images utilisées comme icônes, pictogrammes ou symboles pour votre site Web. 😀 Les polices d’icônes sont un excellent élément pour un site Web responsive, car elles peuvent réduire le temps de chargement en raison de leur taille réduite.

Comme nous l’avons montré, il est très facile de télécharger des polices d’icônes sur WordPress. En outre, les icônes contribuent à l’affichage responsive et à la vitesse de chargement de votre site Web, ce qui en fait une excellente option si vous vous adressez à des utilisateurs accédant à vos services sur des téléphones mobiles ou des connexions lentes, et améliore l’expérience globale de l’utilisateur.

Avatar de l'auteur

Auteur de l'article

Pascal

Pascal est un spécialiste du référencement et de rédaction chez LWS. Il est passionné par les nouvelles technologies et le blogging et possède des années d'expérience dans le web marketing. Ses passe-temps incluent les jeux de stratégie et la natation.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.