Icônes

Le Champ d'icônes met le sélecteur complet de bibliothèque d'icônes d'Elementor dans le panneau de votre widget : Font Awesome, toutes les bibliothèques d'icônes personnalisées enregistrées sur le site, et le téléchargement direct de SVG, le tout derrière les éditeurs de sélecteurs d'icônes déjà connus à l'intérieur des modules complémentaires principaux Constructeur de widgets(en), c'est le domaine des puces de fonctionnalités, des boîtes d'informations, des lignes sociales et de tous les autres endroits où un petit symbole porte le sens.

Comme chaque champ Widget Builder, le contrôle Icons prend en charge Conditions(, utile pour afficher le sélecteur uniquement lorsqu'une bascule de” d'icône “enable est activée et que sa sortie passe par le Moteur de modèles de syntaxe Twig. Les deux guides couvrent les détails et les limites.

La valeur est un tableau avec deux clés, value et library. Cette forme a une conséquence qui mérite d'être énoncée dès le départ : imprimer le champ directement avec {{ my_icon }} ne produit rien du tout Les icônes de police et les SVG téléchargés s'affichent également via un balisage différent, le modèle a donc besoin d'une branche courte Les deux modèles sont en dessous, prêts à être collés.

Ce que fait le champ Icônes #

• Ouvre le sélecteur de bibliothèque d'icônes d'Elementor avec Font Awesome, bibliothèques personnalisées et téléchargement SVG.
• Stocke le choix sous forme de tableau de value et library.
• Détient une chaîne de classe pour les icônes de police: value est la classe de l'icône, prête pour un <i> balise.
• Détient un tableau de fichiers imbriqué pour les SVG: value devient une paire d'URL et d'ID atteinte comme {{ my_icon.value.url }}.
• Accepte une liste par défaut et recommandée1, afin que le sélecteur puisse faire surface les icônes qui conviennent au widget.

Si vous débutez dans la création de widgets, commencez par le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
• Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de liste de fonctionnalités où chaque instance affiche une icône, nommée feature_icon« , à côté d'un court texte de texte ».

Comment ajouter un champ Icônes #

Trouver le Icônes champ dans le panneau à gauche de l'éditeur Widget Builder, regroupé avec les autres champs multimédias.

Faites-le glisser dans une section sous le Contenu onglet. Une fois qu'il atterrit, les options du champ s'ouvrent à gauche.

Options de champ d'icônes expliquées #

• Étiquette: le texte affiché au-dessus du sélecteur dans Elementor, par exemple “Feature Icon”.
• Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement, par exemple feature_icon.
• Par défaut: une icône de départ en tant que value et library paire, pour que le widget ne tombe jamais sans icône.
• Recommandé: un ensemble d'icônes sur lesquelles le sélecteur fait surface en premier, orientant les éditeurs vers des choix adaptés au design.
• Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus Conditions d'affichage du champ uniquement lorsqu'un autre contrôle a une certaine valeur.

Connectez le champ Icônes à votre modèle #

Premièrement, l’erreur que presque tout le monde commet une fois : {{ feature_icon }} n'imprime rien. Le raccourci d'impression directe sur les valeurs du tableau ne génère qu'un niveau supérieur url clé, et le tableau Icons n'en a pas, donc le jeton sort vide Pas d'erreur, pas d'avertissement, juste un endroit vide où l'icône devrait être Les propriétés sont là où le contenu vit.

Icône de police (Font Awesome et autres bibliothèques de classe) : value tient la chaîne de classe, donc un <i> tag le rend :

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

SVG téléchargé : lorsque le choix provient de la bibliothèque SVG, value est lui-même un tableau avec une URL et un ID, donc l'icône se restitue sous forme d'image :

<img src="{{ feature_icon.value.url }}" alt="">

Un widget sait rarement à l'avance quel type l'éditeur choisira, de sorte que le modèle fiable se branche sur le library clé et poignées les deux :

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

Enroulez le tout dans un garde à état vide, comme pour tout champ de type média, de sorte qu'une icône non définie ne laisse aucune égarement <i class=""> derrière:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

Attention aux tests avec les icônes de police uniquement. Le <i>-la version Tag fonctionne toute la semaine, puis un client télécharge un SVG de marque et l'icône disparaît, car un attribut de classe ne peut pas contenir de tableau de fichiers Si vous expédiez le champ, expédiez la branche.

Utilisez le contrôle Icônes dans Elementor #

Ajoutez votre widget personnalisé à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le champ se restitue comme sélecteur d'icônes d'Elementor sous votre étiquette, affichant l'icône actuelle.

Cliquez dessus et la bibliothèque d'icônes s'ouvre Recherchez Font Awesome, parcourez toutes les bibliothèques personnalisées ou passez à l'onglet de téléchargement pour un SVG. Confirmez le choix et les mises à jour d'aperçu, en parcourant la branche de votre modèle qui correspond à la bibliothèque.

Cas d'utilisation courants #

• Listes de caractéristiques et de prestations avec un symbole par point.
• Boîtes d'informations et d'icônes où l'icône ancre le sujet de la carte.
• Lignes de liens sociaux(en), chaque instance associant une icône à un champ URL.
• Boutons et appels à l'action qui portent une petite icône principale.
• Étape et traitez les widgets où les étages numérotés obtiennent chacun un symbole correspondant.

Conseils pour travailler avec le champ Icônes #

• N'imprimez jamais le champ nu. {{ feature_icon }} ne produit rien ; l'icône vit dedans {{ feature_icon.value }} et, pour les SVG, {{ feature_icon.value.url }}.
• Expédier la succursale de la bibliothèque. Le {% if feature_icon.library == 'svg' %} pattern est la seule version qui survit à chaque choix qu'un éditeur peut faire.
• Gardez l'état vide. {% if feature_icon.value %} empêche les icônes non définies de restituer les balises vides.
• Ajouter aria-hidden="true" aux icônes de polices décoratives. Les lecteurs d'écran sautent le symbole et lisent le texte à côté.
• Utilisation Recommandé pour guider le choix. Surfacer un ensemble organisé maintient les icônes d'un widget visuellement cohérentes sur un site.
• Taille des SVG dans votre onglet CSS. Les SVG téléchargés arrivent sous forme d'images, alors donnez à la branche img une largeur pour maintenir le rendu des deux branches à la même échelle.

Foire aux questions #

Envelopper #

Le champ Icônes du constructeur de widgets introduit l'ensemble de la bibliothèque d'icônes Elementor dans un widget personnalisé pour le prix d'une branche courte : value en tant que classe pour les icônes de police, value.url comme fichier pour les SVG, et un garde autour des deux Associez-le avec le Domaine médiatique lorsqu'un emplacement appelle une image complète plutôt qu'un symbole Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.