Principaux points à retenir
- La fenêtre contextuelle de la bibliothèque d'icônes d'Elementor affiche uniquement Font Awesome par défaut, dans les ensembles Regular, Solid et Brands, et chaque widget avec un champ d'icônes ouvre cette même fenêtre contextuelle.
- Le moyen le plus rapide d'ajouter des icônes personnalisées dans Elementor est le bouton Télécharger SVG sur le champ icône ; si le fichier est rejeté, activez Activer les téléchargements de fichiers non filtrés sous Elementor > Paramètres > Avancé.
- L'écran Icônes personnalisées d'Elementor Pro importe une police d'icônes entière à partir d'un fichier.zip Fontello, IcoMoon ou Fontastic et la répertorie sous Mes bibliothèques dans la fenêtre contextuelle de la bibliothèque d'icônes.
- Elementor Pro connecte également Font Awesome Pro : collez votre identifiant de kit sous Elementor > Paramètres > Intégrations et cliquez sur Valider l'ID du kit pour ajouter les styles Pro au sélecteur.
- L'extension Master Addons Icon Library ajoute 8 packs d'icônes avec 5 344 icônes à la même fenêtre contextuelle, et les icônes de plumes, l'icône de remix et les Teenyicons de cet ensemble nécessitent Master Addons Pro.
Vous pouvez ajouter des icônes personnalisées dans Elementor de trois manières : téléchargez un SVG dans n'importe quel champ d'icônes, importez votre propre police d'icônes avec Elementor Pro ou activez des packs d'icônes supplémentaires à partir des modules complémentaires principaux. Tous les trois se retrouvent dans la même fenêtre contextuelle de la bibliothèque d'icônes, qui n'offre que Font Awesome jusqu'à ce que vous y ajoutiez quelque chose.
Ce guide parcourt chaque méthode avec les paramètres exacts sur lesquels cliquer, puis les compare dans un tableau afin que vous puissiez choisir le bon. Après cela, il couvre le style (couleur, taille et vol stationnaire) et les problèmes que les gens rencontrent le plus souvent, comme les icônes qui apparaissent sous forme de carrés vides.
Table des matières
Trois façons d'ajouter des icônes personnalisées dans Elementor
La méthode qui s'adapte dépend du nombre d'icônes dont vous avez besoin et du fait que vous les ayez déjà sous forme de fichiers.
- Pour une ou deux icônes, comme une marque de logo, téléchargez le SVG directement dans le champ d'icônes (Méthode 1).
- Pour votre propre jeu de marques, importez-le sous forme de police d'icônes avec les icônes personnalisées d'Elementor Pro (méthode 2).
- Pour un grand choix d'icônes prêtes à l'emploi sans rien télécharger, activez les packs d'icônes dans Master Addons (Méthode 3).
Vous pouvez mélanger les trois sur une page Un SVG téléchargé, un ensemble d'icônes personnalisées, Font Awesome et un pack Master Addons peuvent tous s'asseoir sur la même page, car chacun n'est qu'une autre source pour le même champ d'icônes.
Méthode 1 : Bibliothèque d'icônes intégrée et téléchargement SVG de l'élémenteur
Chaque widget Elementor avec un champ d'icônes ouvre la même fenêtre contextuelle Icon Library, qu'il s'agisse d'Icône, de Boîte d'icônes, de Liste d'icônes, de Bouton ou d'Icônes Sociales Hors de la boîte qui répertorie les polices impressionnantes en trois ensembles : Regular, Solid et Brands.
- Ajoutez un widget Icon, ou tout widget avec une icône, à votre page.
- Dans l'onglet Contenu, passez la souris sur l'aperçu de l'icône Deux boutons apparaissent : Bibliothèque d'icônes et Télécharger SVG.
- Cliquez sur Bibliothèque d'icônes pour choisir une icône Génial de police ou Téléchargez SVG pour utiliser votre propre fichier.
Upload SVG est le moyen le plus rapide d'ajouter une seule icône personnalisée, comme la marque du logo d'un client WordPress bloque les téléchargements SVG par défaut, donc si Elementor refuse le fichier, activez Activer les téléchargements de fichiers non filtrés sous Elementor > Paramètres > Avancé. Ne faites cela que si vous faites confiance à tous ceux qui peuvent télécharger des fichiers sur le site, puisqu'un SVG peut transporter du code.
Chaque SVG est son propre téléchargement, sans qu'il soit possible de parcourir ou de rechercher ultérieurement. Celui d'Elementor Article d'aide de la bibliothèque d'icônes note également que les widgets Accordéon et Basculer utilisent de petites commandes d'icônes en ligne au lieu de l'aperçu habituel, mais ils ouvrent la même fenêtre contextuelle Une fois que vous avez besoin de plus d'une poignée d'icônes, les deux méthodes suivantes permettent de gagner du temps.
Besoin de plus que Font Awesome ? Le Bibliothèque d'icônes d'éléments dans Master Addons ajoute 5 344 icônes en 8 packs au sélecteur que vous utilisez déjà, avec un commutateur par pack.
Méthode 2 : Téléchargez un jeu d'icônes avec les icônes personnalisées Elementor Pro
Elementor Pro peut charger votre propre police d'icônes dans le sélecteur sous la forme d'un onglet séparé Il accepte les fichiers.zip exportés depuis Fontello, IcoMoon ou Fontastic, pour que vous puissiez construire un ensemble à partir des SVG de votre marque et le conserver au même endroit.
- Construisez votre ensemble dans Fontello, IcoMoon ou Fontastic et téléchargez-le sous forme de fichier.zip.
- Dans WordPress, ouvrez l'écran Icônes personnalisées d'Elementor Dans Elementor 4, il y a un raccourci vers celui-ci sur l'écran d'accueil d'Elementor.
- Cliquez sur Ajouter un nouvel ensemble d'icônes, déposez le fichier.zip, nommez l'ensemble et publiez-le.
- Ouvrez n'importe quel champ d'icônes dans l'éditeur Votre ensemble apparaît sous Mes bibliothèques dans la fenêtre contextuelle de la bibliothèque d'icônes.
Élémentaire propre Guide des icônes personnalisées répertorie les étapes d'exportation pour chaque service, y compris le préfixe CSS unique dont chaque ensemble a besoin. Le piège de cet itinéraire est l'entretien : vous créez ou achetez d'abord l'ensemble, et le téléchargez à nouveau à chaque fois qu'il change.
Connectez la police Awesome Pro
Elementor Pro connecte également un abonnement Font Awesome Pro. Accédez à Elementor > Paramètres > Intégrations, collez votre identifiant Font Awesome Pro Kit et cliquez sur Valider l'ID du kit. Les familles Pro apparaissent ensuite dans le sélecteur à côté des ensembles Font Awesome standard.
Méthode 3 : Ajoutez 8 packs d'icônes avec des modules complémentaires principaux
Le Bibliothèque d'icônes Master Addons extension ajoute huit packs d'icônes complets, 5 344 icônes au total, à la fenêtre contextuelle de la bibliothèque d'icônes Rien n'est téléchargé : vous activez un pack et ses icônes apparaissent dans chaque champ d'icônes du site.
| Pack | Icônes | Style |
|---|---|---|
| Icône de remix (Pro) | 2 271 | Boitiers de ligne et de remplissage |
| Icônes de matériel Google | 1 144 | Rempli |
| Teenyicons (Pro) | 600 | Petit contour |
| Icônes Élémentaires (eicônes) | 398 | Glyphes d'interface de l'élémenteur |
| Police emblématique (iconmonstr) | 300 | Solide |
| Icônes de plumes (Pro) | 272 | Ligne légère |
| Icônes de ligne simples | 189 | Ligne mince |
| Linéaires | 170 | Ligne |
La configuration prend trois étapes :
- Accédez à Modules complémentaires principaux > Paramètres > Extensions, cliquez sur le filtre Bibliothèque d'icônes, activez les packs souhaités et cliquez sur Enregistrer les modifications.
- Ouvrez n'importe quel champ d'icônes dans Elementor et cliquez sur Bibliothèque d'icônes Les nouveaux packs se trouvent sous Mes bibliothèques, chacune avec un petit badge“M”.
- Cliquez sur un pack pour le parcourir, ou tapez Filtrer par nom pour rechercher chaque pack à la fois Sélectionnez une icône et cliquez sur Insérer.
La propre police d'icônes d'Elementor (eicons) n'est pas dans le sélecteur par défaut Master Addons ajoute les 398 eicons sous forme d'onglet, ce qui aide lorsque vous voulez que les icônes qui correspondent à l'interface Elementor Feather Icons, Remix Icon et Teenyicons viennent avec Maître Addons Pro.
Utilisez l'icône Remix pour les états ouverts et fermés
La plupart des formes d'icônes Remix sont disponibles en version ligne et en version remplissage. Cela en fait une bonne correspondance pour les widgets avec deux états d'icônes : dans le Widget Accordéon avancé(ou Accordéon et bascule de l'élémenteur), définissez le contour comme l'icône fermée et la forme remplie comme l'icône ouverte.
Les détails de configuration, le préfixe de classe CSS pour chaque pack et les corrections pour les problèmes courants sont dans le Documents sur les paramètres de la bibliothèque d'icônes.
Quelle méthode utiliser ?
La bonne méthode dépend de ce que vous avez déjà.
| Si vous avez besoin | Commencer par | Ce qu'il faut |
|---|---|---|
| Une ou deux icônes personnalisées, comme une marque de logo | Téléchargez SVG (Méthode 1) | Un fichier SVG et des téléchargements non filtrés activés |
| Le propre jeu d'icônes de votre marque | Icônes personnalisées (méthode 2) | Elementor Pro et un Fontello, IcoMoon ou Fontastic.zip |
| Styles Pro géniaux de police | Intégration Font Awesome Pro (Méthode 2) | Elementor Pro et un identifiant de kit Font Awesome Pro |
| Beaucoup d'icônes toutes faites dans différents styles | Packs d'icônes Master Addons (Méthode 3) | Additions maîtres, un interrupteur par paquet |
| Icônes à l'intérieur de vos propres widgets personnalisés | Maître Addons Widget Builder | Un contrôle Icônes dans le widget |
La dernière ligne est destinée aux personnes qui construisent leurs propres widgets. Le Contrôle des icônes dans le Widget Builder ouvre la même fenêtre contextuelle, afin que les widgets personnalisés puissent utiliser chaque pack que vous avez activé.
Comment styliser les icônes dans Elementor
Les icônes de toutes ces sources utilisent les commandes de style normal du widget Ouvrez l'onglet Style, développez la section Icône et définissez la couleur, la taille et la rotation primaires Passez à l'onglet Survoler pour changer la couleur lorsqu'un visiteur pointe sur l'icône.
Les icônes de police prennent la couleur que vous définissez. Cela couvre les ensembles d'icônes personnalisées Font Awesome et les packs Master Addons. Un SVG téléchargé ne change de couleur que si ses chemins ne portent pas leur propre remplissage fixe, alors supprimez les valeurs de remplissage codées en dur du fichier avant de le télécharger.
Les mêmes commandes apparaissent également dans d'autres widgets d'icônes. Le Widget de boîte d'informations associe une icône avec un titre et un texte, et notre guide boutons animés dans Elementor montre comment placer une icône à l'intérieur d'un bouton et lui donner sa propre couleur de vol stationnaire.
Dépannage des icônes Elementor
La plupart des problèmes d'icônes se résument à un fichier de police qui ne se charge pas ou à un paramètre qui n'a pas été enregistré.
Les icônes apparaissent sous forme de carrés vides
La police d'icônes ne se charge pas Effacer le cache d'Elementor sous Elementor > Outils > Général (Effacer les fichiers et les données), puis effacer votre plugin de mise en cache et votre CDN Si vos polices se chargent à partir d'un CDN sur un autre domaine, vérifiez qu'il autorise les requêtes d'origine croisée pour les fichiers de polices.
Elementor n'acceptera pas mon SVG
Activer Activer les téléchargements de fichiers non filtrés sous Élémenteur > Paramètres > Avancé, puis réessayer le téléchargement S'il échoue toujours, ouvrez le SVG dans un éditeur de texte et vérifiez qu'il s'agit d'un vrai fichier SVG et non d'un PNG avec une extension.svg.
Un pack Master Addons manque dans le sélecteur
Vérifiez que le commutateur du pack est activé sous Addons principaux > Paramètres > Extensions > Bibliothèque d'icônes et que vous avez cliqué sur Enregistrer les modifications, puis rechargez l'éditeur Les icônes de plumes, l'icône de remix et les Teenyicons ont également besoin de Master Addons Pro avec une licence active.
Les polices d'icônes ralentissent la page
Chaque police d'icônes est un fichier de plus à télécharger pour le navigateur Stick to un ou deux packs for a consistance look, et lire notre guide sur accélération des sites Web Elementor(en), qui couvre l'option Icônes de police en ligne d'Elementor pour le rendu des icônes en tant que SVG au lieu des fichiers de police.
Questions fréquemment posées
Comment ajouter des icônes dans Elementor ?
Ajoutez un widget Icon, ou tout widget avec un champ icône, puis passez la souris sur l'aperçu des icones dans l'onglet Contenu et cliquez sur Bibliothèque d'icônes Choisissez une icône dans Font Awesome ou tout jeu d'icônes que vous avez ajouté, puis cliquez sur Insérer pour utiliser votre propre fichier à la place, cliquez sur Télécharger SVG.
Puis-je utiliser les icônes SVG dans Elementor ?
Oui. Cliquez sur le bouton Télécharger SVG sur n'importe quel champ d'icônes et choisissez votre fichier. WordPress bloque les téléchargements SVG par défaut, donc si Elementor le rejette, activez Activer les téléchargements de fichiers non filtrés sous Elementor > Paramètres > Avancé et réessayez.
Ai-je besoin d'Elementor Pro pour ajouter des icônes personnalisées ?
Pas pour les téléchargements SVG uniques ou les packs d'icônes Master Addons L'importation d'une police d'icônes entière à partir d'un Fontello, IcoMoon ou Fontastic.zip via des icônes personnalisées et la connexion de Font Awesome Pro sont des fonctionnalités d'Elementor Pro.
Comment changer la couleur d'une icône en vol stationnaire dans Elementor ?
Sélectionnez le widget, ouvrez l'onglet Style et développez la section Icône Passez de Normal à Hover et définissez-y la couleur du hover Les icônes de police prennent la couleur tout de suite ; un SVG téléchargé ne change de couleur que si ses chemins n'ont pas de remplissage fixe.
Où puis-je trouver la classe CSS pour une icône ?
L'élémenteur génère des icônes de police en tant que <i> marquez avec les noms de classe de l'ensemble, que vous pouvez voir avec l'outil d'inspection de votre navigateur Pour les packs Master Addons, chaque préfixe est répertorié dans le Documents de la bibliothèque d'icônes, par exemple jltma-ri- pour l'icône Remix.
Réflexions finales
L'ajout d'icônes personnalisées dans Elementor se résume à l'endroit où commencent vos icônes Un seul SVG va directement dans le champ d'icônes Une police d'icônes de marque entre par les Icônes personnalisées d'Elementor Pro, à côté de Font Awesome Pro si vous avez un kit Et si vous préférez choisir plutôt que télécharger, les huit packs Master Addons mettent 5 344 icônes supplémentaires dans la même popup.
Pour voir chaque pack avec des échantillons et des comptes d'icônes avant d'allumer quoi que ce soit, parcourez le Bibliothèque d'icônes d'éléments page.
Lecture connexe
- Paramètres de la bibliothèque d'icônes: commutateurs, préfixes CSS et dépannage pour les huit packs
- Contrôle des icônes dans Widget Builder: utilisez les packs dans vos propres widgets personnalisés
- Comment ajouter une icône Font Awesome à un bouton de soumission du formulaire de contact 7
- Tous les widgets et extensions Master Addons
