Dashicons WordPress : Comment les utiliser et en tirer le meilleur parti ?

Les icônes sont fascinantes !

Elles ont le pouvoir de communiquer rapidement avec le public en établissant une forte connexion visuelle

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

Par ailleurs, utiliser le même thème sur votre site pendant plusieurs mois peut être ennuyeux. C'est courant

Ensuite, vous chercherez quelque chose de plus intéressant, vous l'utiliserez et vous l'ennuierez à nouveau,

Et le cycle continue encore et encore.

Alors, comment éviter ce cycle d'ennui ?

Les Dashicons sont un excellent moyen !

Ils peuvent pimenter l'esthétique de votre site et vous aider à vous démarquer. Ils vous éviteront également de faire des efforts supplémentaires et d'encombrer votre site d'images inutiles qui ralentissent la vitesse de la page

Explorons donc les Dashicons et la manière dont vous pouvez les utiliser efficacement sur votre site WordPress

Qu'est-ce que les Dashicons WordPress ?

Les Dashicons sont les polices d'icônes officielles de WordPress introduites il y a plusieurs années avec la version 3.8. Ces polices sont cool et impressionnantes à regarder si vous les utilisez sur votre site web. Il s'agit de fichiers SVG de haute qualité que vous pouvez facilement mettre à l'échelle à n'importe quelle taille sans pixellisation

Comme elles possèdent un support WordPress natif car elles ont été créées 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 de WordPress

Ces icônes ont été classées par thème, 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

• Le tableau de bord de WordPress
• Menus de navigation
• Pages et articles
• Métadonnées
• Éléments de l'éditeur
• Plugins et thèmes personnalisés
• Panneaux d'administration
• Conception de l'interface

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

Il s'agit ici de polices de caractères sous forme d'icônes

Pas des images sous forme d'icônes

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

Décryptons-la

Quelle est la différence entre les images-icônes et les polices-icônes ?

Les polices d'icônes et les icônes images sont quelque peu similaires, mais les polices d'icônes utilisent des symboles vectoriels au lieu d'alphabets

Est-ce trop technique ?

Permettez-moi de clarifier ce point

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

Elles vous offrent de nombreux avantages

Commentaire ?

Vous le découvrirez dans la section suivante

Pourquoi devriez-vous les utiliser ?

• Ils sont évolutifs, comme les textes utilisés sur votre site web, puisqu'il s'agit de polices de caractères
• Légères, elles n'affectent pas la vitesse de chargement de votre page, contrairement aux images
• Possibilité de définir la couleur de l'icône à l'aide de CSS et d'ajouter des propriétés supplémentaires telles que la couleur du dégradé, l'ombre, etc.
• Elles permettent d'économiser de nombreuses requêtes HTTP en chargeant les polices en une seule fois, que vous pouvez utiliser sur l'ensemble de vos pages. Si vous utilisez beaucoup d'images sur votre site, vous devrez effectuer de nombreuses requêtes pour les récupérer, ce qui augmente le temps de chargement des pages.
• Plus facile à utiliser et à ajuster que les images. Vous pouvez ajouter des symboles reconnaissables et créatifs sans avoir à les recréer chaque fois que vous avez besoin d'une icône pour un lecteur vidéo, un courriel, de la musique ou autre chose.
• Plus grande accessibilité parce qu'ils sont intégrés dans WordPress

Comment les utiliser ?

L'utilisation des Dashicons n'a rien de sorcier

Croyez-moi, je connais les deux :0

Il vous suffit de suivre les étapes ci-dessous pour commencer à utiliser les Dashicons de WordPress

Étape 1 : Activer les Dashicons sur votre site WordPress

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

Pour ce faire, procédez comme suit

• Tout d'abord, allez dans l'éditeur de thème/apparence à partir de votre tableau de bord WordPress.
• Ouvrez le fichier function.php.
• Faites défiler le fichier jusqu'à la fin 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 permet d'activer les Dashicons sur le frontend

Assurez-vous de créer un thème enfant avant de modifier le fichier functions.php. En effet, si vous modifiez directement le fichier du thème et qu'une mise à jour est effectuée pour ce thème, elle annulera toutes les modifications que vous avez apportées au fichier

É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 correspondant à chaque icône. Ici, allez dans Ressources pour les développeurs pour trouver les Dashicons que vous voulez utiliser et ensuite, cliquez sur l'icône de votre choix

• Cliquez sur l'icône de votre choix.
• Choisissez entre "Copier CSS" et "Copier HTML" en cliquant dessus.
• Vous verrez alors apparaître une fenêtre pop-up. Copiez simplement le code dans le presse-papiers.
• Décidez de l'endroit où vous souhaitez utiliser l'icône, par exemple dans les thèmes, les métadonnées, le menu de navigation, etc.
• Collez le code copié dans le widget texte ou l'éditeur de texte de l'endroit choisi.
• Modifiez l'apparence des icônes à l'aide d'un CSS personnalisé

C'est tout ce que vous avez à faire

Par ailleurs, par défaut, toutes les icônes ont une taille de 20 pixels. Vous pouvez la modifier en utilisant les éléments CSS à partir d'options telles que Inspecter l'élément de Google Chrome ou FireBug de Firefox

Comment tirer le meilleur parti des Dashicons de WordPress ?

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

1. Utilisez le 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 du menu à partir de Wordpress.org
• Collez-les sur l'"étiquette de navigation" du tableau de bord
• Cliquez sur le bouton "enregistrer" et chargez la page d'accueil. Elle devrait afficher l'icône fraîche et nette.

2. Utilisation sur les méta des articles

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

Comme vous avez déjà mis en file d'attente les Dashicons, ouvrez le fichier style.css. Sinon, vous pouvez également opter pour un éditeur CSS personnalisé, qui ne vous permet pas de 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 de WordPress

Si vous souhaitez que différentes icônes soient incluses pour différents titres d'articles personnalisés, types d'articles ou widgets, c'est facile à faire

Un petit conseil : créez un shortcode

Pour utiliser facilement les Dashicons, vous pouvez créer un shortcode. C'est utile, en particulier lorsque vous créez un site web pour vos clients qui trouveront facile d'insérer des Dashicons sans avoir à s'embrouiller avec les codes

Conclusion

J'espère que les choses sont claires pour vous en ce qui concerne les Dashicons WordPress. Non seulement ils améliorent l'esthétique de votre site web, mais ils 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 d'utiliser ces Dashicons accrocheurs sur votre site WordPress!