Icônes

Le champ Icônes ajoute le sélecteur d'icônes d'Elementor à un widget personnalisé construit avec les modules complémentaires principaux Constructeur de widgets. Les éditeurs choisissent une icône dans la bibliothèque d'icônes ou téléchargent leur propre SVG, et votre modèle l'imprime. Utilisez-le pour les listes de fonctionnalités, les boîtes d'informations, les boutons, les liens sociaux et partout ailleurs où un petit symbole aide.

Icônes est un champ Pro. Le plugin gratuit comprend un Widget Builder limité et l'ensemble complet des champs est livré avec Maître Addons Pro.

Ce que fait le champ Icônes #

• Il ajoute une boîte à icônes au panneau de votre widget dans Elementor, avec des boutons pour la bibliothèque d'icônes et pour télécharger un SVG.
• La bibliothèque d'icônes comprend Font Awesome et les ensembles d'icônes supplémentaires fournis avec les modules complémentaires principaux, tels que les icônes d'élément, les icônes de ligne simple, les icônes linéaires et les icônes matérielles.
• Le terrain stocke deux choses : value (la classe CSS de l'icône, ou le fichier SVG pour un téléchargement) et library (d'où vient le décor).
• Votre modèle imprime un <i> étiquette pour les icônes de bibliothèque et un <img> étiquette pour les SVG téléchargés.

Si vous n'avez pas encore construit de widget, lisez le Aperçu du constructeur de widgets d'abord.

Avant de commencer #

• WordPress avec Elementor installé et actif.
• Master Addons pour Elementor et Master Addons Pro, tous deux actifs. Le guide d'installation couverture configuration.
• Un widget s'ouvre dans le Widget Builder L'exemple de ce guide est un widget “Fature List” : un champ Icons nommé feature_icon et un champ Texte pour le titre.

Comment ajouter un champ Icônes #

1. Aller à Modules complémentaires principaux > Créateur de widgets et ouvrez votre widget.
2. Sur le Contenu tab, ajouter une section, par exemple“Feature”.
3. Type icons dans le champ champ rechercher box à gauche.
4. Glisser Icônes dans la section Ses paramètres s'ouvrent dans la barre latérale gauche.

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

• Étiquette est le texte au-dessus de la zone d'icônes dans Elementor, par exemple “Feature Icon”.
• Nom est l'ID unique du champ et le début de ses jetons, donc feature_icon donne {{ feature_icon.value }}. Lettres, chiffres et soulignements uniquement.
• Description apparaît sous le contrôle dans Elementor.
• Peau offre Inline et Media Il change la façon dont le propre aperçu du constructeur dessine le champ Dans nos tests Elementor a montré la grande boîte d'icônes dans un sens ou dans l'autre.
• Valeur par défaut l'icône est-elle une nouvelle copie du widget commence par Cliquez sur Changer d'icône pour en choisir un, ou la petite croix pour le dégager Sans jeu par défaut, le champ commence par l'icône du logo Elementor.

Changer d'icône ouvre le sélecteur d'icônes Master Addons Choisissez un ensemble à gauche, recherchez par nom, cliquez sur une icône, puis Insérer.

Imprimez l'icône dans votre modèle #

{{ feature_icon }} sur ses propres impressions rien, parce que le champ détient deux valeurs Utilisez plutôt ses parties :

• {{ feature_icon.value }} est la classe d'icônes pour une icône de bibliothèque, telle que eicon eicon-check. Pour un SVG téléchargé il imprime l'URL du fichier.
• {{ feature_icon.library }} est le nom défini, tel que eicons, simple-line-icons ou svg pour un upload.
• {{ feature_icon.value.url }} est l'URL du SVG lorsque la bibliothèque est svg.

Les éditeurs peuvent choisir l'un ou l'autre type, alors vérifiez la bibliothèque et imprimez la bonne balise. Enveloppez tout cela dans une vérification pour une valeur vide afin que rien ne s'imprime lorsque l'icône est supprimée :

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

Les icônes de bibliothèque sont des glyphes de police, elles prennent donc le color et font-size de l'élément qui les entoure Un SVG téléchargé dans un <img> tag garde ses propres couleurs, alors taillez-le avec width et height dans l'onglet CSS.

Cliquez Enregistrer Paramètres quand t'auras fini.

Utilisez le contrôle Icônes dans Elementor #

Ajouter le widget à une page, ou recharger l'éditeur si la page était déjà ouverte La boîte à icônes affiche l'icône actuelle Passez dessus pour voir Bibliothèque d'icônes et Télécharger SVG(en), et une icône de corbeille pour supprimer l'icône.

Bibliothèque d'icônes ouvre la fenêtre d'icônes d'Elementor Choisissez un ensemble à gauche, filtrez par nom, cliquez sur une icône et cliquez Insérer. Télécharger SVG ouvre la Médiathèque pour pouvoir télécharger ou choisir un fichier SVG. Elementor peut vous demander d'autoriser les téléchargements SVG pour la première fois.

Icônes de police géniales et icônes de police en ligne #

Sur notre site de test, les icônes d'élément, les icônes de ligne simple et les SVG téléchargés ont tous été affichés sur la page publiée, mais pas une icône Font Awesome. Celui d'Elementor Icônes de police en ligne la fonctionnalité est activée par défaut et arrête le chargement de la feuille de style Font Awesome, donc le <i> la balise du widget reste vide Aller à Élémenteur > Paramètres > Caractéristiques, définissez Icônes de police en ligne sur Inactif et enregistrer. L'icône Font Awesome est alors apparue Si vous préférez conserver cette fonctionnalité, utilisez les autres jeux d'icônes ou un téléchargement SVG.

Cas d'utilisation courants #

• Listes de fonctionnalités et boîtes d'informations avec une icône à côté de chaque titre.
• Boutons avec une icône principale ou arrière.
• Liens sociaux, coordonnées et puces de liste.
• Marques de marque, en téléchargeant le logo en tant que SVG.

Conseils pour travailler avec le champ Icônes #

• Toujours gérer les deux cas dans le modèle : <i> pour les icônes de bibliothèque et <img> pour les téléchargements SVG.
• Garde avec {% if feature_icon.value %} donc une icône vide ne laisse pas un wrapper vide derrière.
• Définissez une valeur par défaut adaptée au widget, afin qu'il n'affiche jamais le logo Elementor par accident.
• Stylez l'emballage, pas la balise d'icône, donc les deux types d'icônes se trouvent dans la même boîte.
• Vérifiez un choix Font Awesome sur la page en direct avant de vous y fier (voir la section ci-dessus).
• Pour les images plutôt que pour les icônes, utilisez le Domaine médiatique.

Foire aux questions #

Envelopper #

Ajoutez le champ Icônes, définissez une icône par défaut et imprimez-la avec un modèle qui gère à la fois les icônes de la bibliothèque et les téléchargements SVG. Vérifiez les choix Font Awesome sur la page publiée et désactivez les icônes de police en ligne si elles sortent vides. Pour les autres champs de l'onglet Contenu, consultez le URL et Choisir champs, et vérifiez tarification pour ce que chaque plan comprend.