Souvent les icônes de bases sont insuffisantes pour rendre attractive une page, surtout lorsque le thème de votre site est spécifique (nourriture, sport, musique …)
Ajouter des icônes personnalisées, et les utiliser dans vos blocks ou éléments au même titre que les icônes standards, permets d’ajouter un petit plus aux articles et pages de votre site.
(NOTA : La partie ajout sur le site ne traitera que de Kadence bundle ou Elementor pro, mais vous trouverez des outils équivalents dans Divi ou dans les plugins de blocks avancés d’autres thèmes)
Constituer son pack personnel d’icones
Pour cela, vous avez des sites d’icones plus ou moins gratuites
- iconbuddy.com
- svgrepo.com
- flaticon.com
- freepik.com
- iconduck.com
- thenounproject.com
- …
- icomoon.io (mais lui on va le mettre de coté, il va nous servir)
Certaines sont libres, d’autres sous licence, d’autres encore en licence CC by SAx et dans le cas de ces dernières n’oubliez pas de les créditer dans vos mentions légales afin d’être en règle.
Il va vous falloir récupérer vos icones soit au format SVG soit en JSON.
Une fois votre pack constitué, il faut le convertir en pack icomoon avant de pouvoir l’installer sur votre site WordPress.
Convertir votre pack d’icones en pack icomoon
Rendez-vous sur : https://icomoon.io/app/#/projects
Créez votre projet.
Une fois le titre donné, cliquez sur ‘Load’ pour accéder à votre librairie.
Vous pouvez importer (1) les icones SVG ou JSON que vous avez collectées.
Et/ou ajouter les icones des bibliothèques iconmoon (2) en sélectionnant uniquement celles qui vous intéressent.
Les icones sélectionnées sont entourées de jaune, la sélection se fait par simple clic dessus.
Une fois le pack complet, cliquez sur ‘Generate Font’ en bas à droite.
Puis cliquez sur Download. Vous obtenez un ficher zip avec le nom icomoon.
Petit tips : Avant de charger votre fichier, allez dans les préférences et changez la ‘Font Name’ ainsi que le préfixe css (saisissez quelque chose d’unique et personnel), cela pourrait vous éviter de croiser un pack ayant le même préfixe, et ainsi éviter des erreurs de design.
Ajouter le pack d’icones personnalisées sur Elementor Pro
Allez dans le menu Elementor, Icones personnalisées, ajoutez, donnez-lui un titre et vous envoyez le zip récupéré d’icomoon.
Et les icones choisies sont prêtes à l’emploi.
Ajouter le pack d’icones personnalisées sur Kadence Bundle
Kadence, comme la plupart des thème avancés, propose (dans sa version payante) le moyen d’insérer vos propres icônes personnalisées sur votre site WordPress.
D’abord il faut dézipper le package récupéré sur icomoon. Puis sur votre site, allez dans la partie outils de Kadence (en général en bas de votre page d’administration), dans ‘Custom Icons’, faites ‘Ajouter’ .
Là, vous donnez un titre puis le bouton ‘Upload an icon file’. Enfin allez chercher le fichier selection.json dans le répertoire dézippé et cliquez sur ‘Upload’.
Les icones choisies sont prêtes à l’emploi dans vos blocks.
Vos icones personnalisées sur votre site WordPress
Nota (18-03-2025) : à compter de Kadence Blocks 3.5, faites ‘Search Icons’ et vous avez accès à toute la bibliothèque de www.svgrepo.com, soit plus de 500 000 icones format svg en licence open ou du domaine public.
Exemple d’utilisation dans les blocks Kadence
Exemple d’utilisation dans les Widgets Elementor
Besoin d’un Coach personnel pour finaliser votre site ?
Besoin d’un coup de pouce professionnel pour faire améliorer le design de votre site, pour régler les détails de CSS et pour résoudre des points bloquants…
