Icônes WordPress: comment en tirer le meilleur parti

Les icônes WordPress peuvent rendre les sites plus attrayants et vous aider à remplacer des points de liste simples dans les anciennes listes par un contenu plus attrayant visuellement. Ils vous permettent également de visualiser certains concepts rapidement et facilement, en évitant les photos ou illustrations complexes. Les icônes sont considérées comme des modèles familiers à la plupart des utilisateurs. Par exemple, si vous remarquez l’icône du microphone quelque part sur le réseau ou dans l’application mobile, vous pouvez dire intuitivement qu’elle fait référence à une commande vocale ou à une fonction d’enregistrement, n’est – ce pas?
De nombreuses icônes sont devenues des symboles communs et, dans certains cas, peuvent remplacer complètement le texte. Par exemple, les quatre étoiles suivantes peuvent remplacer le texte suivant: « les quatre cinquièmes des clients qui ont acheté ce HP Deskjet le recommandent ». Pourquoi utiliser l’icône WordPress? Commençons par les bases. L’icône est au centre… Le rôle. Surprise? Vous pouvez changer sa taille et sa couleur comme vous le feriez avec n’importe quelle autre police. Les icônes sont des polices qui utilisent des symboles et des pictogrammes plutôt que des lettres et des chiffres. Imaginez les petites images que les adultes cliquent souvent.
Je veux dire: Les icônes que vous connaissez le plus sont probablement celles des médias sociaux: Facebook, YouTube, etc., n’est – ce pas? Certains d’entre vous pourraient penser que l’icône est une image. Donc, vous pourriez vous demander, pourquoi ne pas vous demander si les deux sont si semblables? Malheureusement, ces images ne sont pas extensibles et ne répondent pas; Ainsi, ils peuvent ralentir le temps de chargement de la page et rendre la page inaccessible à certains utilisateurs. Par conséquent, les polices d’icônes deviennent une alternative moins lourde qui peut être utilisée sur n’importe quel écran.
D’autre part, les polices d’icônes sont des images vectorielles. Ils sont donc très extensibles. En plus, je suis
Il s’agit d’une excellente fonctionnalité pour la conception réactive, car vous pouvez facilement modifier les polices d’icônes au besoin. De plus, de nombreuses options personnalisées sont disponibles, comme changer la taille et la couleur des icônes, tourner les icônes, ajouter des effets, et plus encore. Les icônes sur le site Web sont un moyen subtil de communiquer de petits détails qui sont importants pour vous au public. Les gens vous feront plus confiance si vous faites attention aux détails. Ils pensent que vous prenez votre contenu très au sérieux. Tu aimes ce que tu fais.
Les problèmes de performance à considérer lors de l’utilisation des polices d’icônes se trouvent dans la Bibliothèque d’icônes, comme font AWESOME. Vous n’avez pas besoin d’ajouter ces bibliothèques au site WordPress. Au lieu de cela, vous pouvez vous connecter à eux avec un petit script. Si vous le faites, la vitesse de chargement de la page ne sera pas réduite. Vous n’hébergez pas localement les polices d’icônes, mais n’utilisez que celles dont vous avez besoin. Nous faisons référence à votre serveur hôte WordPress ou CDN. (réseau de diffusion de contenu) téléchargement local. La plupart des thèmes WordPress ou des constructeurs de pages le font maintenant pour vous, afin que vous n’ayez pas à vous soucier des scripts.
Il est très utile de réduire la taille du fichier de 100 ko à quelques ko en sélectionnant seulement la police d’icônes souhaitée! Mieux encore, vous pouvez combiner et correspondre aux icônes de différents jeux de caractères. Maintenant, explorons différentes façons d’ajouter des icônes WordPress sur le site! Comment ajouter des icônes WordPress à votre site il y a plusieurs façons d’ajouter des icônes WordPress à votre site et aujourd’hui nous vous montrerons ce que vous devez faire. Option 1: une façon d’utiliser l’icône WordPress font en utilisant le plugin wordpress est d’utiliser un plugin tiers. Si vous êtes un utilisateur en temps réel, cette méthode s’applique
Les débutants essaient d’ajouter des icônes à votre message ou à votre page. Vous ne devriez pas modifier de fichiers de sujets, vous pouvez utiliser des polices d’icônes sur tout le site.
Nous pouvons vous fournir le plugin parfait. Les personnages magiques Il est facile d’utiliser de grands plugins de polices sur le site WordPress. Cependant, en suivant ces étapes simples, vous pouvez réduire le temps de chargement de la page et utiliser ces icônes dans votre travail pour créer un design simple et simple. Gardez à l’esprit que de grandes icônes de police seront envoyées à votre site en tant que personnages réels (dans la plupart des cas). Le nom de police AWESOME a donc été créé. Grâce au CSS créé par @ font face et font AWESOME font Series, vous serez en mesure de modéliser et de manipuler les polices de n’importe quelle façon, ainsi que de les styliser et de les gérer.
Commençons à travailler. Tout d’abord, continuez à installer et activer le plug – in à partir du tableau de bord WordPress. Pour en savoir plus sur la façon de l’utiliser et de le personnaliser, consultez le diagramme d’utilisation de base de la police AWESOME 5 et sa bibliothèque d’icônes. Il est important de se rappeler que font AWESOME peut utiliser du Code court, donc pour générer une icône, vous devez taper le Code court dans l’éditeur Gutenberg. Lorsque vous êtes prêt, passez du tableau de bord aux paramètres, puis à la police great. Voici ce que vous verrez: Supposons maintenant que vous souhaitez ajouter une icône WordPress à votre message. Supposons que nous voulions ajouter une icône cardiaque. Voici le Code court que nous utiliserons: Ensuite, allez dans un message ou une page, ajoutez un bloc de code court et collez le code ci – dessus. Ensuite, appuyez sur l’aperçu pour voir comment il se transforme miraculeusement en un petit cœur. C’est l’icône de notre cœur! C’est simple, non? En quelques minutes, une icône de police active et étonnante apparaît sur notre site. Supposons que vous vouliez le tripler. Tu peux?
Je multiplie ça par fa – 3x. Vous devez retourner à l’éditeur de page où vous avez d’abord collé le Code court, en ajoutant simplement \ Appuyez sur aperçu pour voir la taille de l’icône de notre cœur. C’est une grande différence, n’est – ce pas? C’est tout! Avec font AWESOME, il est facile d’ajouter des icônes et de les rendre plus grandes ou plus petites selon vos préférences. Option 2: utiliser les dashicons intégrés qu’est – ce que les dashicons? Dashicons est un ensemble d’icônes de caractère fournies par WordPress qui peuvent être facilement ajoutées au site WordPress. Depuis sa création, le projet est devenu une ressource précieuse avec plus de 300 icônes. Pour commencer à utiliser dashicons, vous devez d’abord installer et activer un plug – in gratuit, tel qu’un fragment de code. Cela réduit la probabilité que le sujet s’arrête et que les changements demeurent inchangés même si le sujet a été mis à jour.
Après avoir configuré le plug – in, allez sur le site Web de dashicons, sélectionnez une icône et cliquez sur le lien copier HTML pour obtenir le Code dont vous avez besoin pour voir l’icône. Ils n’ont pas beaucoup de choix, mais ils sont très utiles et légers. Après avoir copié l’icône HTML, vous devez retourner à l’éditeur Gutenberg et coller le Code comme si vous aviez utilisé le Code raccourci dans l’option 1. C’est tout! C’est notre petite icône de trait d’union! C’est la fin de nos deux façons d’utiliser et d’insérer des icônes WordPress sur votre site. Maintenant que vous avez appris quelques différentes façons d’obtenir rapidement des polices d’icônes sur votre site WordPress, voici quelques plugins d’icônes que vous pouvez envisager d’utiliser sur votre site. Les cinq meilleures icônes du site WordPress En utilisant le plug – in d’icônes de menu meisle, vous pouvez ajouter des icônes correspondant à chaque élément du menu du site pour le rendre visuellement attrayant. C’est l’un des plugins d’icônes
Ou blog; Laissez vos icônes de médias sociaux flotter ou coller; Permettre aux visiteurs de s’abonner à votre blog par courriel; Sélectionnez une variété d’autres options personnalisées pour votre icône de médias sociaux. Widgets et blocs d’icônes sociales wpzoom Ce simple plugin d’icônes WordPress vous permet d’ajouter facilement des icônes à partir de différents sites de médias sociaux et de créer des liens vers vos pages. La communication avec les lecteurs par les médias sociaux fait partie intégrante d’un marketing efficace. Vous pouvez utiliser ce plugin pour faciliter la communication avec les visiteurs de votre site via votre page de médias sociaux. Certaines des icônes sociales disponibles sont Facebook, Twitter, Google +, Instagram, Pinterest, Skype, Vimeo, Flickr et YouTube. Avec plus de 200 000 sites qui lui font confiance, il s’agit sans aucun doute d’un plugin populaire dont les fonctionnalités et les outils ne peuvent être ignorés. Caractéristiques du plug – in: Télécharger l’icône SVG; Charger l’icône SVG; Créer votre propre ensemble d’icônes personnalisées; Excellence; Support avancé. Images de menu, simplification des icônes Comme son nom l’indique, il s’agit d’un simple plugin d’icônes pour WordPress, similaire au premier de cette liste. Cependant, il aide à créer un menu de site plus attrayant visuellement. Ce plug – in vous permet d’insérer facilement une image ou une icône dans un élément de menu. Il comprend également des outils pour contrôler la position et la taille de l’image. Caractéristiques du plug – in: dashicons; Icône fontawesome; Masquer le titre, n’afficher que l’image ou l’icône; Insérer une image ou une icône à gauche du titre de l’élément de menu; Insérer une image ou une icône à droite du titre de l’élément de menu; Ajouter une image ou une icône au – dessus du titre de l’élément de menu; Ajouter une image ou une icône sous le titre de l’élément de menu; Lorsque vous déplacez la souris sur un élément de menu, elle change l’image ou l’icône; Convertir les éléments du menu en pursant
C’est azione. (prix); Ajouter des bulles de comptage à l’élément de menu contenant les totaux (totaux du panier, totaux des catégories, personnalisation); Badge de notification (avancé) sur l’élément de menu (nouveau, vente, recrutement, etc.). (primes d’assurance); Personnaliser la couleur des boutons, badges et bulles; Dans cet exemple, je vais utiliser deux générateurs de page: Colibri et kubio. Colibri est un générateur de page traditionnel qui étend la fonctionnalité de WordPress customizer. Kubio Builder est un plugin qui fonctionne avec l’éditeur de blocs WordPress (Gutenberg). Les deux fabricants ont des programmes gratuits et payants. La plupart des fabricants vont maintenant suivre une voie similaire à celle de Colibri. De plus, page Builder contient de nombreuses autres fonctionnalités qui peuvent vous aider à concevoir votre site Web sans avoir à écrire une seule ligne de code ou à vous fier à un plugin pour compenser la partie de WordPress qui vient avec vous. Comment personnaliser les icônes dans WP Colibri nous allons utiliser WordPress Colibri topics et Colibri page Builder dans cette section de tutoriel et vous montrer comment personnaliser facilement les icônes. Après avoir installé et activé le thème Colibri, ajoutez quelques icônes à la page. Pour ce faire, cliquez sur le signe plus bleu en haut de la page et sélectionnez l’icône dans la section composants. À partir de là, vous pouvez simplement faire glisser et déposer l’icône que vous souhaitez utiliser sur la page. Maintenant, Personnalisez le programme. Ici, vous pouvez voir trois éléments de menu: contenu, style et avancé. Prenons – les un par un. Au niveau du contenu, vous pouvez: modifier l’image de l’icône; Collez le lien à l’endroit désiré lorsque vous cliquez sur l’icône; Définit l’alignement horizontal de l’icône. Au niveau du style, vous pouvez: changer la couleur de l’icône; Changer la couleur de l’icône lorsque vous passez le curseur; Définir la taille de l’icône; Définir la rotation des icônes; Définir l’espacement
Le fond et les bords; Définit le type de bordure (complet, pointillé, pointillé, double précision, rainuré, crête, insertion, démarrage, caché) définit le rayon de la bordure. De plus, nous avons des options de personnalisation « avancées », mais elles sont limitées aux clients avancés. Comment personnaliser les icônes dans kubio Kubio est un générateur de page par bloc qui fonctionne sur l’éditeur Gutenberg par défaut. Il est enrichi par de nouveaux blocs et des pièces prêtes à l’emploi entièrement personnalisables. Pour cet exemple particulier, nous utiliserons le thème de promotion WP dans mon exemple, mais vous pouvez utiliser n’importe quel thème que vous voulez; Kubio est compatible avec tous les thèmes WordPress. Après avoir activé elevate WP et kubio Builder, allez à la page – > toutes les pages. Maintenant, passez le curseur sur la page et sélectionnez Édition en utilisant kubio. Une fois dans l’éditeur, vous verrez un grand logo bleu en haut de la page qui ouvrira la section bloc où vous pouvez ajouter des icônes à personnaliser. Une fois l’icône sélectionnée, vous voulez l’ajouter à la page, cliquez dessus et laissez la technologie sélectionnée glisser jouer sa magie. Comme vous pouvez le voir, nous avons trois options pour personnaliser les icônes: contenu, style et avancé. Vérifions – les un par un. Au niveau du contenu, vous pouvez: modifier l’image de l’icône; Collez le lien à l’endroit désiré lorsque vous cliquez sur l’icône; Définit l’alignement horizontal de l’icône. Au niveau du style, vous pouvez: changer la couleur de l’icône; Changer la couleur de l’icône lorsque vous passez le curseur; Définir la taille de l’icône; Définir la rotation des icônes; Définir l’arrière – plan et l’espacement des frontières; Définit le rayon limite. Au niveau avancé, vous pouvez: Choisissez une couleur et un type de fond pour vos boutons WordPress; Définir le remplissage et la marge des boutons; Régler les bords et les rayons; Activer ou désactiver les ombres de boîte; L’impression est importante
Et le style de police, la taille, le poids, la couleur, la décoration, la hauteur de ligne, l’espacement des lettres, etc. Indique si les boutons doivent être affichés sur les appareils mobiles, les tablettes et les appareils de bureau. Divers paramètres: y compris l’ajout de classes CSS supplémentaires, d’ancres HTML et d’index Z. je pense que les options potentielles dans kubio sont excellentes. Ce niveau de contrôle de style est disponible pour tous les blocs kubio, du titre et de l’image au curseur et aux compteurs. Vous pouvez utiliser kubio pour n’importe quel thème WordPress et il vous aidera à améliorer rapidement les fonctionnalités de n’importe quel thème sans avoir besoin d’un plugin wordpress supplémentaire. Pour vous, les icônes de menu WordPress ont de nombreux avantages. Tout d’abord, ils peuvent restaurer votre site Web et rendre la navigation plus intuitive. Maintenant, avec l’aide de notre article, vous avez quelques façons de les inclure dans votre site Web, ainsi que quelques plugins utiles pour vous aider. L’utilisation d’icônes vous profitera sans aucun doute de diverses façons, y compris en attirant l’attention des visiteurs en quelques secondes et en fournissant des informations plus rapidement qu’auparavant. Maintenant, si vous aimez cet article et souhaitez en savoir plus sur la façon de concevoir le site WordPress, assurez – vous de vous abonner à notre chaîne YouTube et de nous suivre sur Twitter et Facebook!