Les icônes sont fascinantes !

Ils ont le pouvoir de communiquer rapidement avec le public en établissant un lien visuel fort.

C’est pourquoi les icônes sont largement utilisées partout, y compris sur les sites WordPress.

De plus, utiliser le même thème sur votre site pendant plusieurs mois peut être ennuyeux. C’est courant.

Et puis, vous serez à la recherche de quelque chose de plus intéressant, en utilisant cela, et vous vous ennuierez à nouveau,

Et le cycle continue encore et encore…

Alors, comment pouvez-vous éviter ce cycle d’ennui ?

Les dashicons sont un excellent moyen !

Cela peut pimenter l’esthétique de votre site et vous aider à vous démarquer. Cela vous évitera également de faire des efforts supplémentaires et de surcharger votre site avec des images inutiles qui ralentissent la vitesse de la page.

Alors, explorons les Dashicons et comment vous pouvez les utiliser efficacement sur votre site WordPress.

Qu’est-ce que WordPress Dashicons ?

Les dashicons sont les polices d’icônes officielles de WordPress introduites il y a des années avec sa version 3.8. Ces polices sont cool et géniales à regarder si vous les utilisez sur votre site Web. Ce sont des fichiers SVG de qualité supérieure que vous pouvez facilement mettre à l’échelle à n’importe quelle taille sans pixelisation.

Comme ils possèdent un support WordPress natif en raison de leur création par leur équipe elle-même, vous pouvez les utiliser directement sans charger de scripts supplémentaires. Il y a environ 350 polices d’icônes incluses, que vous pouvez trouver dans les ressources officielles des développeurs WordPress.

Ils ont classé ces icônes en fonction du sujet, et vous pouvez voir un champ de recherche dynamique qui vous permet de filtrer les icônes disponibles.

Vous pouvez utiliser ces icônes sur :

• Tableau de bord WordPress
• Menus de navigation
• Pages et messages
• Métadonnées
• Éléments de l’éditeur
• Plugins et thèmes personnalisés
• Panneaux d’administration
• Conception frontale

Avez-vous remarqué que je dis « icônes » à plusieurs reprises ?

Ici, je veux dire juste les polices d’icônes.

Pas d’images sous forme d’icônes.

Oui, il y a une différence entre les deux.

Décryptons cela.

Différence entre les icônes d’image et les polices d’icônes ?

Les polices d’icônes et les icônes d’image sont quelque peu similaires, mais au lieu d’alphabets, des symboles vectoriels sont présents dans les polices d’icônes.

C’est devenu trop technique ?

Permettez-moi de clarifier cela.

Fondamentalement, ces polices d’icônes ressemblent à des images que vous pouvez utiliser pour ajouter des symboles sur votre site Web, mais pas à une image réelle.

Ils vous offrent de nombreux avantages.

Comment?

Découvrez-le dans la section suivante.

Pourquoi les utiliser ?

• Évolutif comme les textes utilisés sur votre site Web car ce sont des polices
• Léger qui n’affecte pas la vitesse de chargement de votre page par rapport aux images
• Capable de définir la couleur de l’icône via CSS et d’ajouter des propriétés supplémentaires telles que la couleur du dégradé, l’ombre, etc.
• Idéal pour économiser trop de requêtes HTTP en vous permettant de charger des polices en même temps, que vous pouvez utiliser sur vos pages. Si vous utilisez beaucoup d’images sur le site, vous devrez faire beaucoup de demandes pour les récupérer, ce qui augmente le temps de chargement des pages.
• Facile à utiliser et à régler que les images. Vous pouvez ajouter des symboles reconnaissables et créatifs sans avoir besoin de les recréer chaque fois que vous avez besoin d’une icône pour un lecteur vidéo, un e-mail, de la musique ou toute autre chose.
• Une plus grande accessibilité car ils sont intégrés directement dans WordPress

Comment les utiliser ?

L’utilisation de Dashicons n’est pas une ingénierie de fusée.

Croyez-moi; Je connais les deux :0

Suivez simplement quelques étapes mentionnées ci-dessous pour commencer avec WordPress Dashicons.

Étape 1 : Activez les Dashicons sur votre site WordPress

Avant de commencer, activez les Dashicons là où vous en avez besoin, par exemple, un thème. Pour cela, vous devez ajouter quelques codes au fichier function.php.

Pour le faire:

• Tout d’abord, accédez à l’éditeur de thème/d’apparence à partir de votre tableau de bord WordPress.
• Ouvrez le fichier function.php.
• Faites défiler jusqu’à la fin du fichier et ajoutez quelques lignes de code pour mettre les scripts en file d’attente

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

L’exemple ci-dessus consiste à activer les Dashicons sur le frontend.

Assurez-vous de créer un thème enfant avant de modifier le fichier functions.php. C’est parce que si vous modifiez directement le fichier de thème, puis qu’une mise à jour est effectuée pour ce thème, toutes les modifications que vous apportez au fichier seront remplacées.

Étape 2 : Trouvez les codes HTML et CSS de Dashicon

WordPress.org propose une bibliothèque de Dashicons, qui vous aide à trouver les codes CSS et HTML appartenant à chaque icône. Ici, allez dans Developer Resources pour trouver les Dashicons que vous souhaitez utiliser, puis :

• Cliquez sur l’icône de votre souhait.
• Choisissez entre « Copier CSS » ou « Copier HTML » en cliquant dessus.
• Maintenant, vous verrez une fenêtre pop-up. Copiez simplement le code dans le presse-papiers.
• Décidez où vous souhaitez utiliser l’icône, comme les thèmes, les métadonnées, le menu de navigation, etc.
• Collez le code copié dans le widget de texte ou l’éditeur de texte de l’endroit choisi.
• Modifier l’apparence des icônes à l’aide de CSS personnalisé

C’est ça.

De plus, par défaut, toutes les icônes ont une taille de 20 pixels. Vous pouvez le modifier à l’aide des éléments CSS des options telles que l’élément Inspect de Google Chrome ou FireBug de Firefox.

Comment tirer le meilleur parti des Dashicons WordPress ?

Vous avez vu comment vous pourriez utiliser les Dashicons sur votre site, et maintenant nous allons voir son utilisation à des fins spécifiques.

1. Utilisation du menu de navigation

Pour ajouter des icônes au menu, suivez les étapes ci-dessous :

• Allez dans Menus/Apparence depuis le tableau de bord
• Copiez les codes HTML conçus pour l’icône de menu à partir de WordPress.org
• Collez-le sur le « Navigation Label » sur le tableau de bord
• Cliquez sur le bouton « enregistrer » puis chargez la page d’accueil. Il devrait afficher l’icône cool et nette.

2. Utilisation sur post meta

Vous pourrez utiliser des Dashicons juste devant une date, le nom de l’auteur, une étiquette ou une catégorie en fonction du thème et des données qu’il affiche.

Comme vous avez déjà mis des Dashicons en file d’attente, ouvrez le fichier style.css. Sinon, vous pouvez également opter pour un éditeur CSS personnalisé, qui ne vous laisse pas perdre vos modifications après les mises à jour du thème. Ensuite, ajoutez votre code CSS après avoir trouvé un sélecteur correspondant.

3. Sur le backend WordPress

Si vous souhaitez inclure différentes icônes pour différents titres de publication personnalisés, types de publication ou widgets, c’est facile à faire.

Un petit conseil : créez un shortcode

Pour utiliser facilement les Dashicons, vous pouvez créer un shortcode pour celui-ci. C’est utile, surtout lorsque vous créez un site Web pour vos clients qui pourraient facilement insérer des Dashicons sans jouer avec les codes.

Conclusion

J’espère que les choses sont assez claires de votre côté concernant WordPress Dashicons. Ils couvrent non seulement l’esthétique de votre site Web, mais sont également faciles à utiliser et améliorent la vitesse de chargement des pages.

Et vous savez, « beauté et intelligence » est une combinaison rare.

Alors, dépêchez-vous, utilisez ces Dashicons accrocheurs sur votre site WordPress !