Comment l'utiliser et en tirer le meilleur parti ?

0 Partages

Les icônes sont fascinantes !

Ils 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.

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 éviter ce cycle d’ennui ?

Les Dashicons sont un excellent moyen !

Il peut pimenter l’esthétique de votre site et vous aider à vous démarquer. Cela vous évitera également de déployer 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.

Table des matières

Qu’est-ce que les Dashicons WordPress ?

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 pixellisation.

Comme ils possèdent un support WordPress natif car ils ont été créés 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 l’officiel Ressources pour les 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 publications
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 des images sous forme d’icônes.

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

Démêlons 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 procurent de nombreux avantages.

Comment?

Découvrez-le dans la section suivante.

Pourquoi devriez-vous 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 toutes les polices à la fois, que vous pouvez utiliser sur vos pages. Si vous utilisez beaucoup d’images sur le site, vous devrez faire beaucoup de requêtes 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.

Fais-moi confiance; Je connais les deux :0

Suivez simplement les étapes mentionnées ci-dessous pour démarrer 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/apparence à partir de votre tableau de bord WordPress.
Ouvrez le fichier fonction.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 et qu’une mise à jour arrive pour ce thème, elle remplacera toutes les modifications que vous apportez au fichier.

Étape 2 : Trouver 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 contextuelle. 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’emplacement choisi.
Modifier l’apparence des icônes à l’aide de CSS personnalisés

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 à partir d’options telles que Inspect Element de Google Chrome ou FireBug de Firefox.

Comment tirer le meilleur parti des Dashicons WordPress ?

Vous avez vu comment 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 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, un nom d’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 les 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 que différentes icônes soient incluses pour différents titres de publication personnalisés, types de publication ou widgets, c’est facile à faire.

Un petit conseil : créez un code court

Pour utiliser facilement 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 trouveraient facile d’insérer des Dashicons sans jouer avec les codes.

Conclusion

J’espère que les choses sont assez claires de votre côté concernant les Dashicons WordPress. 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, « la beauté et l’intelligence » est une combinaison rare.

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