Le constructeur de page WordPress Elementor propose par défaut la police d’icônes Font Awesome, mais sachez que vous avez la possibilité d’en ajouter d’autres grâce à l’extension gratuite Custom Icons for Elementor pour laquelle je vous propose ici une série de trois tutoriels vidéo.

Pré-requis pour la mise en place des tutos

Pour pouvoir mettre en pratique les trois tutoriels vidéo WordPress de cet article au sujet de l’ajout de polices d’icônes à Elementor, vous devrez avoir installé et activé les extensions Elementor & Custom Icons for Elementor.

Elementor Page Builder
Elementor Page Builder
Développeur: Elementor.com
Prix: Gratuit
  • Elementor Page Builder Capture d'écran
  • Elementor Page Builder Capture d'écran
  • Elementor Page Builder Capture d'écran
  • Elementor Page Builder Capture d'écran
  • Elementor Page Builder Capture d'écran
  • Elementor Page Builder Capture d'écran
  • Elementor Page Builder Capture d'écran
Custom Icons for Elementor
Custom Icons for Elementor
Développeur: Michael Bourne
Prix: Gratuit

Vous devrez également utiliser le site http://fontello.com/ pour paramétrer votre pack d’icônes.

Enfin, seules les icônes au format SVG pourront être importées dans votre bibliothèque Elementor.

Importer une police d’icônes disponible sur Fontello dans Elementor

Dans ce premier tutoriel vidéo, nous allons voir le principe de fonctionnement du site Fontello.com et de l’extension Custom Icons for Elementor.

Nous allons donc nous contenter d’importer dans Elementor une des polices d’icônes disponibles sur Fontello.com.

  • rendez-vous sur le site Fontello.com et sélectionnez les icônes que vous souhaitez importer dans Elementor
  • vous pouvez piocher dans les différentes polices d’icônes mises à votre disposition sur le site
  • cliquez sur l’onglet « Customize Names » si vous souhaitez personnaliser le nom des icônes sélectionnées (facultatif)
  • cliquez sur l’onglet « Customize Codes » si vous souhaitez personnaliser le code des icônes sélectionnées (facultatif)
  • saisissez un nom dans le champ « Name » situé à gauche du bouton « Download webfont », puis cliquez sur ce dernier
  • allez à Elementor => Custom Icons dans l’admin de votre WordPress
  • glissez et déposez votre pack d’icônes dans la zone de téléversement sous l’intitulé « Upload Fontello Zip »
  • attendez que votre pack d’icones apparaisse dans la zone « Uploaded Fonts » et cliquez sur le bouton «  Regenerate » dans la zone « Regenerate CSS » (facultatif, mais recommandé pour régénéré le CSS)
  • vous pouvez maintenant utiliser les icônes importées dans vos contenus créés avec Elementor 😉

Importer une police d’icônes autre que celles disponible sur Fontello dans Elementor

Bien que Fontello propose une belle panoplie de polices d’icônes, vous pourriez avoir besoin ou envie d’en utiliser d’autres, aussi nous allons voir dans ce tutoriel vidéo WordPress comment importer une police d’icônes personnalisée dans Elementor.

Sachez que ce tutoriel s’appliquera aussi bien pour importer une police d’icône que vous avez créée ou fait créer qu’une police d’icônes que vous avez achetée.

Si vous appréciez mes articles & tutoriels, pensez à les partager sur les réseaux sociaux et n’hésitez pas à passer par mes liens affilié lorsque vous achetez un thème, une extension ou un nouveau plan d’hébergement. Merci d’avance 😉

Cette fois-ci, vous devez donc d’abord glisser et déposer vos icônes dans la zone intitulée « Custom Icons » sur Fontello.com avant de les sélectionner et de personnaliser leur nom/code (facultatif), puis de nommer le pack d’icônes avant de le glisser/déposer sur votre site (voir le tutoriel précédent).

Supprimer une police d’icônes chargée via Custom Icons for Elementor

Si vous vous rendez compte que vous n’utilisez pas ou plus une police d’icônes que vous avez chargée sur votre site via l’extension Custom Icons for Elementor, je vous recommande de la supprimer, car mieux vaut ne pas conserver des éléments qu’on n’utilise pas ou plus.

En effet, cela peut alourdir inutilement le chargement de votre constructeur de page et surtout, cela vous complique la tâche dans la recherche de l’icône adaptée lorsque vous créez de nouveaux contenus.

Donc pour faire le ménage au niveau de vos icônes Elementor, je vous propose un tutoriel vidéo dans lequel je vous comment supprimer une police d’icônes chargée sur WordPress via Custom Icons for Elementor.

Pour mettre en pratique ce tuto WordPress, il vous suffit de vous connecter à votre administration WordPress et de vous rendre dans l’onglet « Elementor => Custom Icons », puis de cliquer sur le bouton « Delete » de la police concernée dans la zone « Uploaded Fonts ».

Liste des polices d’icônes mises à disposition sur Fontello.com

Si vous vous demandez encore si cela vaut le coup de passer par le site Fontello.com pour obtenir de nouvelles polices d’icônes, voici la liste au 4 août 2018 de celles proposées :

  1. Fontelico
  2. Font Awesome
  3. Entypo
  4. Typicons
  5. Iconic
  6. Modern Pictograms
  7. Meteocons
  8. MFG Labs
  9. Maki
  10. Zocial
  11. Brandico
  12. Elusive
  13. Linecons
  14. Web Symbols

Vous avez donc déjà de quoi faire avec tout cela 😉

Précisions/débogage

Pour finir, souvenez-vous de ces quelques recommandations et/ou pistes de débogage :

  • il faut absolument donner un nom à votre pack d’icônes sur Fontello avant de pouvoir le télécharger
  • votre pack d’icônes doit avoir un nom différent de ceux déjà installés sur votre WordPress
  • respectez les caractères autorisés pour le nom sur Fontello (lettres minuscules, chiffres et « – » ou « _ », sans espace)
  • si vous créez plusieurs packs d’icônes successivement sur Fontello, pensez à leur donner un nom différent et surtout à décocher les icônes des précédents packs
  • si vos icônes n’apparaissent pas dans Elementor, vérifiez que le téléchargement est bien terminé et régénérez le CSS
  • si vous voyez le nom des icônes dans Elementor, mais pas les icônes elles-mêmes, supprimez votre pack, puis recommencez en prenant soin de renommer vos icônes sur Fontello.com avant de télécharger le pack

Si vous avez trouvé une faute d’orthographe ou une coquille, vous pouvez m’en informer en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée. Je vous en remercie par avance.

Print Friendly, PDF & Email