Les icônes sont fascinantes !

Elles 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 web WordPress.

De plus, 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 vous 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 qualité supérieure que vous pouvez facilement adapter à 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 ?

Ici, il s’agit uniquement de polices d’icônes.

Pas des images sous forme d’icônes.

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

Décortiquons-la.

Quelle est la différence entre les icônes et les polices d’icônes ?

Les polices d’icônes et les icônes images sont quelque peu similaires, mais les polices d’icônes contiennent 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.

Comment ?

Découvrez-le dans la section suivante.

Pourquoi 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 par le biais 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

Suivez simplement les étapes mentionnées ci-dessous pour commencer à utiliser les Dashicons de WordPress.

Etape 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 :

  • 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 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 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.
  • 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 Inspect Element 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. Utiliser le menu de navigation

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

  • Allez dans Menus/Apparence à partir du tableau de bord
  • Copiez les codes HTML conçus pour l’icône du menu à partir de Wordpress.org
  • Collez-les sur le “Label de navigation” dans le 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 le méta de l’article

Vous pourrez utiliser les Dashicons juste devant une date, le nom d’un 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. Ils ne couvrent pas 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 d’utiliser ces Dashicons accrocheurs sur votre site WordPress!