Comment utiliser des icônes SVG personnalisées dans les blocs Kadence : un guide détaillé

Kadence Blocks Pro Fournit une variété de moyens pour aider les utilisateurs à utiliser la personnalisation dans leurs sites web SVG Les icônes. A partir de l'écranl'esthétiqueetreprésentationsnéanmoinsÉvolutivité de la technologieLes icônes SVG peuvent jouer un rôle important. Cet article décrit comment ajouter des icônes SVG personnalisées à l'aide des blocs Kadence, en couvrant plusieurs méthodes courantes.

SVG et sécurité/soutien

SVG(Scalable Vector Graphics) est un format d'icônes très répandu qui peut être utilisé pour la création d'images.Redimensionner sans distorsion. Bien qu'elle ait beaucoup à offrir en termes de design, la WordPress Vous devez vous préoccuper de la sécurité lorsque vous utilisez SVG dans le format SVG, qui est basé sur la norme XML et peuvent donc cacher des codes malveillants. Veuillez tenir compte des points suivants lorsque vous utilisez des icônes SVG :

risque de sécuritéLe format SVG peut intégrer des scripts malveillants et doit être utilisé avec prudence.
source (d'information, etc.)Les icônes : Essayez d'utiliser des SVG que vous avez créés vous-même, et si vous utilisez des icônes de tiers, assurez-vous de choisir une source fiable.
Taille de l'icôneIl est recommandé d'utiliser le format SVG 24x24px, qui est le format standard pour les blocs Kadence.
balayageAvant de télécharger des icônes SVG, il est recommandé de les analyser pour s'assurer qu'elles ne posent pas de problèmes de sécurité.

Si vous souhaitez contrôler la couleur de l'icône, il est recommandé d'utiliser l'icône de remplissage, car l'icône de trait ne vous permet pas d'ajuster la couleur directement.

Ajouter des icônes personnalisées à l'aide du gestionnaire d'icônes intégré

Blocs Kadence Un gestionnaire d'icônes facile à utiliser est fourni pour permettre aux utilisateurs de télécharger et d'utiliser directement des icônes personnalisées. SVG Icônes. Voici les étapes exactes :

Ouvrir le menu déroulant de sélection des icônes
Dans Paramètres des icônes, cliquez sur le menu déroulant de sélection des icônes pour accéder à l'interface de gestion des icônes.

Télécharger un SVG personnalisé
Sous l'onglet Mes icônes, cliquez sur l'icône plus et sélectionnez Télécharger un fichier SVG personnalisé.

Conseils de sécurité
Lors du téléchargement, le système rappellera de vérifier SVG Les fichiers sont-ils nettoyés et conformes aux exigences de taille (24x24px).

Coller le code SVG
Si vous avez le code SVG sous la main, cliquez sur "Collez votre code SVG"Il suffit de coller le code directement dans la zone de texte.

Terminer le téléchargement
Une fois le téléchargement terminé, l'icône s'affiche dans le champ "Mes icônes"Vous pouvez sélectionner et utiliser l'icône.

Icône de suppression
Si une icône n'est plus nécessaire, survolez-la et cliquez sur le bouton rouge X Supprimer.

Conversion des traits SVG en remplissages

Blocs Kadence Contrôlez la couleur de l'icône en la remplissant d'une couleur. Si votre SVG Les icônes qui utilisent un trait au lieu d'un remplissage ne verront pas leurs paramètres de couleur pris en compte. Il est donc recommandé de convertir l'icône de trait en icône de remplissage.

Méthode de conversion
Les icônes SVG à trait peuvent être converties en icônes à remplissage à l'aide d'un outil en ligne. Après la conversion, l'apparence de l'icône ne change pas, mais ses propriétés sont modifiées de sorte que les couleurs peuvent être contrôlées par Kadence.

Icône de traitCes icônes sont généralement définies par un contour et doivent être converties en icônes de remplissage avant de pouvoir être modifiées par les paramètres de couleur de Kadence.

Icône de remplissageIl s'agit d'un graphique solide qui permet un contrôle direct de la couleur sans conversion.

Utilisation de la fonction de recherche d'icônes Kadence

Kadence Une fonction de recherche d'icônes permet aux utilisateurs de rechercher et d'importer d'autres icônes personnalisées disponibles. Les étapes à suivre pour utiliser cette fonction sont les suivantes :

Ouvrir le menu déroulant de sélection des icônes
Cliquez à nouveau sur le menu déroulant de sélection des icônes dans Paramètres des icônes pour accéder à l'écran Gestion des icônes.

Icônes de recherche
Dans la fenêtre contextuelle, cliquez sur "rechercher qqch."Saisissez le nom de l'icône et le système affichera l'icône correspondante.

Sélectionner et ajouter des icônes
Une fois que vous avez trouvé l'icône souhaitée, cliquez sur le bouton "Ajouter" dans le coin inférieur droit pour l'ajouter à la liste des icônes personnalisées.

Charger d'autres icônes
Si vous ne trouvez pas la bonne icône, vous pouvez cliquer sur "Plus d'informations"pour voir d'autres options d'icônes.

Ajout d'icônes personnalisées avec les polices IcoMoon

IcoMoon est un outil gratuit qui permet à l'utilisateur de placer des SVG Les icônes sont converties en fichiers de polices. Vous trouverez ci-dessous une liste de polices qui peuvent être converties en polices à l'aide de la fonction IcoMoon Etapes pour ajouter une icône personnalisée pour la méthode des polices :

Sélectionner l'icône
existent IcoMoon Sur le site web, téléchargez ou sélectionnez l'icône SVG que vous souhaitez utiliser.
Générer des polices
Après avoir sélectionné l'icône, cliquez sur le bouton "Générer la police".

Télécharger les fichiers de polices
Téléchargez le fichier de police généré.

Téléchargement de fichiers de polices
Décompressez le fichier téléchargé et trouvez le fichier .json et se rendre ensuite dans le fichier Kadence Panneau de configuration, naviguer vers Kadence Blocks > Custom Icons, télécharger le fichier .json Documentation.

Sélection et utilisation des icônes
Une fois le téléchargement terminé, vos icônes seront importées. KadenceVous pouvez les utiliser comme n'importe quelle autre icône Kadence.

résumés

Blocs Kadence Diverses méthodes sont proposées pour aider les utilisateurs à utiliser facilement la personnalisation dans leurs sites web. SVG Icônes. Utilisez le gestionnaire d'icônes intégré, la fonction de recherche d'icônes ou l'option IcoMoon Convert SVG Icons to Fonts, vous pouvez choisir la bonne méthode en fonction de vos besoins. En utilisant ces méthodes, vous pouvez facilement ajouter des icônes personnalisées à votre site web pour améliorer la beauté et la fonctionnalité de la conception de votre page.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.