Vous êtes ici : Accueil | Plugins WordPress | Comment installer une police d’icônes sur votre blog WordPress

Comment installer une police d’icônes sur votre blog WordPress

police-icones-wordpress

Pour ce nouvel article, j’accueille un nouveau cuistot, enfin une « cuistote » (si vous avez le bon mot je suis preneur) en la personne de Marlène. Elle partage ses découvertes dans la bonne humeur sur Notuxedo.fr.

Je ne sais plus vraiment comment je suis arrivé sur son blog mais en lisant un ou deux articles liés à WordPress, je lui ai proposé de venir partager ses connaissances sur la Marmite.

Vous vous apprêtez donc à lire son premier article. Il est consacré aux polices d’icônes. Je ne vous en dis pas plus. Marlène, c’est à toi 🙂

Si vous êtes blogueur, vous mesurez sans doute à quel point il est important qu’un article donne envie de lire, grâce à une présentation soignée et de petites astuces pour mettre en valeur les éléments importants.

Vous utilisez sûrement déjà des sous-titres, du gras, peut-être même de la couleur. Et si on utilisait aussi une police d’icônes ?

Vous n’en avez peut-être jamais entendu parler mais vous en avez sûrement déjà vu !

Elle permet d’afficher de petites images pour agrémenter vos liens, attirer l’attention sur une phrase de votre texte, signaler une citation par de gros guillemets…

Dans cette recette, je vais vous expliquer quels sont les avantages d’une telle police et comment en installer une sur votre blog à l’aide du plugin Genericon’d.

Avantages et utilisations possibles d’une police d’icônes

L’intérêt d’une police d’icônes

Le premier point est qu’une police d’icônes fonctionne comme n’importe quelle police d’écriture mais au lieu d’afficher des lettres, elle permet d’afficher… des icônes (bravo, je vois que vous suivez) !

Et pour continuer sur une autre lapalissade… une police d’icônes présente d’abord l’avantage d’être une police ; cela signifie que vous pouvez personnaliser vos icônes de manière très fine : les agrandir, afficher une ombre derrière, les mettre en couleur en fonction de vos besoins comme vous le feriez avec un texte.

Si vous utilisiez des images, vous seriez obligés à chaque fois de mettre en ligne une nouvelle image, plus grande ou d’une couleur différente.

Ici, il n’y a aucune perte de qualité quand vous faites un agrandissement car les icônes sont vectorisées, exactement comme les logos des marques qui peuvent ainsi être affichés en grand format sans pixellisation.

Regardez la différence : à gauche, une image que l’on agrandit ; à droite, une police d’icônes que l’on agrandit.

Agrandissement d'images vectorielles et matriciel

Ensuite, une police d’icônes est plus rapide à charger que des images : elle se charge une fois et ensuite, vous pouvez utiliser autant d’icônes que vous le souhaitez sans alourdir le poids de vos pages.

Enfin, quel navigateur ne sait pas afficher une police ? Aucun ! Les polices d’icônes fonctionneront sur tous les navigateurs, y compris sur d’anciennes versions.

Même votre grand-mère qui n’a pas mis à jour Internet Explorer depuis 5 ans les verra ! La transparence est elle aussi gérée à la perfection.

Comment utiliser une police d’icônes

Il existe toutes sortes d’icônes qui, selon la thématique de votre blog, peuvent agrémenter vos articles ou votre thème. Voici quelques exemples :

Utilisation des icônes sous WordPress

Installer Genericons sur son blog WordPress

Il existe de nombreuses librairies d’icônes gratuites, parmi lesquelles on peut citer Font Awesome, Typicons ou Entypo.

La bonne nouvelle, c’est que les créateurs de WordPress (la start-up Automattic) ont développé leur propre police d’icônes, Genericons, très facile à installer et à utiliser sur les blogs WordPress. Pour ce faire nous allons faire appel au plugin Genericon’d.

Rendez-vous dans le menu Extensions > Ajouter de WordPress. Entrez le mot clé Genericon’d et installez le plugin (lisez cet article pour en savoir plus sur l’installation d’un plugin).

Plugin Genericon'd par Mika Epstein

Genericon’d vous donne accès à près de 150 icônes différentes. Vous pouvez consulter la liste intégrale via le menu Apparence > Genericon’d de WordPress.

Icônes de Genericons'd

En cliquant sur l’icône de votre choix, vous pourrez copier soit un shortcode, soit un code HTML.

Le shortcode vous servira si vous voulez intégrer facilement une icône dans un de vos articles.

Les codes HTML et CSS serviront davantage aux utilisateurs plus avancés qui souhaitent placer une icône à un endroit précis de leur thème. Par exemple pour mettre l’icône « commentaires » à côté du nombre de réactions sur un article.

Code d'intégration d'une icône

Comment insérer une icône dans un article

Imaginons que j’aie envie d’afficher l’icône nuage ci-dessus dans un article. Je clique donc sur « Copy Shortcode » et à l’endroit de mon article où je veux que l’icône s’affiche, j’insère le shortcode suivant :

[genericon icon=cloud]

Ensuite, vous pouvez aller plus loin dans la personnalisation de l’icône et lui ajouter une couleur, ici le rouge :

[genericon icon=cloud color=#FF0000]

Note d’Alex : Pour trouver un code couleur dans votre thème, utilisez Eye Dropper pour Chrome ou ColorZilla pour Firefox.

Besoin d’agrandir votre icône ? Il suffit de préciser sa taille par rapport à la taille de base : par exemple « 3x » si vous voulez qu’elle s’affiche en 3 fois plus grand que sa taille initiale.

[genericon icon=cloud size=3x]

Envie d’afficher plusieurs icônes d’affilée ? Utilisez le paramètre « repeat » :

[genericon icon=cloud repeat=5]

Vous pouvez bien sûr combiner ces différents paramètres… pour afficher par exemple 3 nuages rouges d’une taille 3 fois supérieure à la normale !

[genericon icon=cloud repeat=3 color=#FF0000 size=3x]

Vous pouvez aussi avoir envie de faire tourner votre icône : là encore, c’est possible ! Ajoutez le paramètre « rotate » avec au choix 90, 180 ou 270 (degrés de rotation) ou « flip-horizontal » / « flip-vertical » si vous souhaitez une symétrie horizontale ou verticale de l’icône.

Au niveau des shortcodes, cela donne :

[genericon icon=cloud rotate=flip-vertical]
[genericon icon=cloud rotate=90]

Si vous voulez utiliser les Genericons dans votre thème, vous devez utiliser non pas le shortcode mais le code HTML à l’endroit qui vous intéresse.

Par exemple, si je veux afficher un nuage rouge qui fait 3 fois la taille standard de ma police d’écriture, je procéderai ainsi :

<i style= »color:#FF0000; » class= »genericond genericon genericon-cloud genericon-3x genericon-rotate-normal »></i>

Encore une fois, le code ci-dessus ne concerne que les personnes ayant une bonne connaissance du code. Si vous avez uniquement besoin d’icônes dans vos articles, cantonnez-vous aux shortcodes.

J’espère que ce plugin vous aidera à enrichir le contenu de vos articles 😉

Qu’avez-vous pensé de cet article ? Allez-vous utiliser Genericon’d pour votre blog ?

Si vous avez apprécié cet article, inscrivez-vous à la newsletter

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 10000 personnes l'ont fait, pourquoi pas vous ?

C'est parti, je m'inscris !

18 commentaires Ajoutez le vôtre

  1. Bonjour,

    Très intéressant ! Je ne connaissais pas. Mais est-ce que l’icône peut aussi être cliquable ? Et du coup ça veut dire ajouter encore un plugin de plus :s

    Répondre
    • Bonjour,
      L’icône peut tout à fait être cliquable sans plugin supplémentaire, ça fonctionne vraiment comme n’importe quelle police d’écriture 🙂 On peut créer un lien comme ceci par exemple :
      [genericon icon=facebook size=4x]

      Et quand on travaille avec l’éditeur visuel, on insère le shortcode dans son article, on le sélectionne avec sa souris puis on clique sur l’icône « lien ». Ça permet de créer un lien sur le shortcode (et donc sur l’icône) très facilement.

    • Le code n’est pas passé dans mon commentaire 🙂 Tu as ci-dessus la méthode pour faire un lien si tu utilises l’éditeur visuel (qui permet une mise en forme facile des articles).

      Si tu as désactivé le mode éditeur visuel, tu peux faire un lien facilement avec la balise a href (tu ouvres la balise avant le shortcode et tu la fermes après).

  2. Super ! Merci, je prend note.

    Répondre
  3. Hello la team !
    Avez-vous déjà testé le plugin présenté avec la version 4.0.1 de WP ?
    Sur le repository de WordPress.org, aucune info à ce sujet ….
    Merci d’avance

    Répondre
    • Bonjour Tita,
      Je l’ai testé sur WP 4.1 et cela fonctionne bien 🙂

      A bientôt
      Alex

  4. Bonjour 😉
    même si pas mal de thème propose déjà cette solution à travers des shorcodes, l’idée est assez bien vue et le plugin sera bienvenu pour compléter un thème qui n’ a pas cette option. On appréciera grandement l’utilisation d’image svg … le format de l’avenir sur lequel il faut se pencher 😉

    Répondre
  5. Merci,
    Cette explication m’est très utile !
    Je suis allé faire un tour sur votre site du coup, je suis curieuse de savoir quel thème vous utilisez, il est vraiment très sympa …
    Le site aussi est très bien , je vais vous suivre comme marmite mais aussi l’excellent un-blog-une-fille.com de Noémie.
    Merci pour votre investissement important pour la communauté WordPress.

    Répondre
    • Bonjour Béatrice, merci pour les compliments 🙂 C’est un thème que j’ai créé moi-même, en partant du thème gratuit Adelle que j’ai peu à peu transformé et réécrit jusqu’à en faire ce qui me plaisait vraiment. J’en ai fait deux versions d’ailleurs : l’une pour la partie principale de mon blog, l’autre pour la partie « Escapades » où les critiques de livres & de films sont présentées avec la couverture (ou l’affiche) et la note que j’attribue.

  6. Bonjour,

    Je cherche à inclure des icônes dans mes menus, qui plus-est, des menus personnels. Est-ce qu’il existe un plugin ou un moyen d’inclure des icônes qui s’intègre bien au bouton de navigation responsive (lorsque je réduits ma fenêtre de navigateur par exemple…)

    Merci !

    Répondre
    • Bonjour Mathieu, les icônes peuvent se redimensionner comme si c’était du texte (par exemple, si la feuille de style indique une taille de police différente selon la taille de l’écran) donc pas de problème côté responsive.

      Pour le menu, vous pouvez chercher du côté de la propriété « :before » en css. L’idée est d’ajouter aux liens de votre menu la propriété « before » avec ensuite la ligne de code : content: ‘\fXXX’; (en remplaçant XXX par le code de l’icône qui vous intéresse, par exemple f203 pour l’icône Facebook). Ca indique à votre menu qu’avant (« before ») le lien, il faut ajouter un contenu (« content ») : l’icône. Tout se jouera donc dans le fichier style.css du thème.

      Il y a un exemple de code sur le lien suivant. Il fait appel à Font Awesome et non à Genericons mais ça aide à comprendre le principe : https://siteorigin.com/thread/adding-a-menu-icon-to-a-custom-menu-link/

    • Pardon, je me suis très mal exprimé.
      J’aimerais, dans mon menu, inclure certains de ces icônes : http://thenounproject.com/
      Je l’ai fait MAIS, lorsque l’on réduit la fenêtre du navigateur, alors l’icône menu apparaît (le côté responsive), mais les icônes et le texte du menu s’affichent mal…

    • S’il s’agit du site Association Apache, je ne suis pas sûre de comprendre car le menu ne fait pas appel à une police d’icônes mais à des images en png… Ce n’est pas le même principe (c’est l’un des avantages de la police d’icônes par rapport à l’utilisation d’images). S’agit-il d’un autre site ?

  7. c’est les fêtes …. un lien vers une jolie quantité d’icone vectoriel
    http://fortawesome.github.io/Font-Awesome/ 😉 TEST

    Répondre
  8. Bonjour,

    J’utilise souvent les icônes car le visuel fonctionne mieux que l’écrit.
    Je n’utilise pas Genericon’d mais Olevmedia Shortcodes qui fait le même boulot et même plus, rajoute des fonctions.

    Merci pour ce super article..

    Répondre
  9. et je fais une recherche sur le web et la seconde ligne c’est bien toi .. merci pour ce site de très bonne qualité ..

    Répondre
    • mais question, comment fait on pour insérer une icone dans une liste ?

    • Bonjour Isabelle, je ne sais pas si tu veux l’intégrer à une liste en plus des « puces » de la liste ou faire en sorte que l’icône remplace les « puces » de la liste.

      Si le but est de remplacer les puces, tu peux par exemple utiliser le code CSS de l’icône qui t’intéresse. Dans ton fichier CSS, il faudra indiquer les choses sous cette forme :
      li:before {content: »\f221″;}

      Bien sûr, il faut remplacer le « \f221 » par le code de l’icône qui t’intéresse. Dans mon exemple, ça va s’appliquer à toutes les listes mais si tu veux l’appliquer à une liste précise, tu peux ajouter une classe à cette liste et n’appliquer la méthode qu’à cette classe précise, par exemple :
      .monbeaumenu li:before {
      content: « \f221 »;
      }

      Je ne sais pas quel est ton niveau de connaissances en CSS mais j’espère que ça t’éclairera un peu !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



78 Shares
Share10
Tweet63
Share5