Les illustrations sous forme d’icônes sont réellement captivantes !
Elles possèdent une faculté à communiquer rapidement avec le public, en instaurant une connexion visuelle forte et instantanée.
C’est la raison pour laquelle les icônes sont employées de manière intensive, notamment sur les plateformes web WordPress.
De plus, l’emploi d’un même design graphique sur votre site durant plusieurs mois peut devenir lassant. C’est un phénomène courant.
Par conséquent, vous serez amené à rechercher des éléments plus stimulants, et par la suite, vous ressentirez à nouveau de l’ennui.
Ce schéma se répète indéfiniment…
Alors, comment s’affranchir de ce cycle de monotonie ?
Les Dashicons représentent une solution idéale !
Elles peuvent dynamiser l’apparence de votre site et contribuer à le différencier. Cela vous permettra également d’éviter des efforts superflus et de ne pas surcharger votre site avec des images inutiles qui impactent négativement la vitesse de chargement de la page.
Par conséquent, partons à la découverte des Dashicons et explorons comment les utiliser efficacement sur votre site WordPress.
Que sont les Dashicons WordPress ?
Les Dashicons sont les polices d’icônes officielles de WordPress, introduites il y a plusieurs années, à partir de la version 3.8. Ces polices présentent un aspect attrayant et élégant lorsqu’elles sont utilisées sur votre site. Elles sont composées de fichiers SVG de haute qualité que vous pouvez facilement adapter à n’importe quelle dimension sans perte de netteté.
Étant donné qu’elles bénéficient d’un support natif de WordPress, ayant été conçues par leur équipe, vous pouvez les utiliser directement sans recourir à des scripts additionnels. Environ 350 polices d’icônes sont proposées, que vous pouvez retrouver sur la page officielle Ressources pour les développeurs WordPress.
Ces icônes ont été organisées par thématiques, et vous avez à votre disposition une barre de recherche dynamique qui vous permet de filtrer les icônes disponibles.
Vous pouvez employer ces icônes dans :
- Le tableau de bord WordPress
- Les menus de navigation
- Les pages et publications
- Les métadonnées
- Les éléments de l’éditeur
- Les plugins et thèmes personnalisés
- Les panneaux d’administration
- La présentation du site (front-end)
Avez-vous remarqué que j’ai employé le terme « icônes » à plusieurs reprises ?
En l’occurrence, je me réfère spécifiquement aux polices d’icônes.
Et non pas aux images employées comme icônes.
En effet, une distinction existe entre ces deux types d’éléments.
Explorons cette distinction en détail.
Quelle est la différence entre les images d’icônes et les polices d’icônes ?
Les polices d’icônes et les images d’icônes présentent des similitudes, cependant, au lieu de caractères alphabétiques, les polices d’icônes affichent des symboles vectoriels.
Cela semble un peu technique, n’est-ce pas ?
Permettez-moi de clarifier cela.
En résumé, ces polices d’icônes s’apparentent à des images que vous pouvez utiliser pour intégrer des symboles sur votre site web, sans qu’il ne s’agisse de véritables images.
Elles offrent de nombreux avantages.
Comment ?
Nous allons l’examiner dans la section suivante.
Pourquoi devriez-vous les privilégier ?
- Elles sont redimensionnables à l’instar des textes employés sur votre site, car il s’agit de polices
- Elles sont légères, ce qui préserve la vitesse de chargement de vos pages, contrairement aux images
- Il est possible de modifier la couleur des icônes via CSS et d’ajouter d’autres propriétés telles que les dégradés, les ombres, etc.
- Elles sont parfaites pour limiter les requêtes HTTP, en vous permettant de charger toutes les polices simultanément et de les employer sur vos différentes pages. Si vous utilisez de nombreuses images, vous devrez effectuer de multiples requêtes pour les récupérer, ce qui a une incidence sur le temps de chargement des pages.
- Elles sont plus simples à utiliser et à ajuster que les images. Vous pouvez ajouter des symboles reconnaissables et créatifs sans avoir à les recréer systématiquement, que ce soit pour un lecteur vidéo, un e-mail, de la musique ou tout autre élément.
- Elles assurent une plus grande accessibilité, étant donné qu’elles sont intégrées directement dans WordPress
Comment les utiliser ?
L’emploi des Dashicons ne relève pas de l’ingénierie spatiale.
Faites-moi confiance, j’ai une certaine connaissance des deux domaines :0
Suivez simplement les étapes décrites ci-dessous pour commencer à utiliser les Dashicons WordPress.
Étape 1 : Activer les Dashicons sur votre site WordPress
Avant toute chose, vous devez activer les Dashicons là où elles vous seront utiles, par exemple, au niveau du thème. Pour ce faire, vous devez ajouter quelques lignes de code au fichier function.php.
Voici comment procéder :
- Dans un premier temps, accédez à l’éditeur de thème/apparence depuis votre tableau de bord WordPress.
- Ouvrez le fichier fonction.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 front-end.
Il est primordial 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 de ce dernier est publiée, elle annulera toutes les modifications que vous aurez apportées au fichier.
Étape 2 : Trouver les codes HTML et CSS des Dashicons
WordPress.org met à disposition une bibliothèque de Dashicons, qui vous aide à localiser les codes CSS et HTML associés à chaque icône. Pour ce faire, accédez aux Developer Resources pour trouver les Dashicons que vous souhaitez utiliser, puis :
- Cliquez sur l’icône de votre choix.
- Sélectionnez « Copier CSS » ou « Copier HTML » en cliquant dessus.
- Une fenêtre contextuelle s’affichera. Copiez simplement le code dans le presse-papiers.
- Déterminez où vous souhaitez utiliser l’icône, que ce soit dans 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.
- Modifiez l’apparence des icônes à l’aide de CSS personnalisés
C’est terminé.
De plus, par défaut, toutes les icônes ont une dimension de 20 pixels. Vous pouvez ajuster cette dimension grâce aux éléments CSS disponibles, par le biais d’options telles que Inspect Element de Google Chrome ou FireBug de Firefox.
Comment exploiter pleinement le potentiel des Dashicons WordPress ?
Vous avez maintenant vu comment utiliser les Dashicons sur votre site, et nous allons maintenant observer leur utilisation à des fins spécifiques.
1. Utilisation dans le menu de navigation
Pour intégrer des icônes dans le menu, suivez les étapes ci-dessous :
- Rendez-vous dans Menus/Apparence depuis le tableau de bord
- Copiez les codes HTML conçus pour l’icône de menu depuis WordPress.org
- Collez-les dans le champ « Navigation Label » du tableau de bord
- Cliquez sur le bouton « Enregistrer » puis actualisez la page d’accueil. L’icône devrait s’afficher de manière claire et nette.
2. Utilisation au niveau des métadonnées des publications
Vous avez la possibilité d’intégrer des Dashicons juste avant une date, un nom d’auteur, un tag ou une catégorie, en fonction du thème et des informations affichées.
Étant donné que 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 vous évitera de perdre vos modifications lors des mises à jour du thème. Ensuite, ajoutez votre code CSS après avoir identifié le sélecteur approprié.
3. Au niveau du back-end WordPress
Si vous souhaitez que des icônes différentes soient employées pour divers titres de publications personnalisés, types de publication ou widgets, cela s’avère facile à mettre en place.
Un conseil supplémentaire : créez un shortcode
Afin de faciliter l’utilisation des Dashicons, vous pouvez créer un shortcode dédié. Cela est particulièrement utile lorsque vous développez un site web pour des clients, car ils pourront facilement insérer des Dashicons sans avoir à manipuler les codes.
Conclusion
J’espère que vous avez maintenant une idée claire du fonctionnement des Dashicons WordPress. Elles améliorent non seulement l’aspect esthétique de votre site, mais elles sont également simples à mettre en œuvre et contribuent à améliorer la vitesse de chargement des pages.
Et, comme vous le savez, « la beauté et l’efficacité » forment une combinaison rare.
Alors, n’attendez plus, et commencez à employer ces Dashicons attrayantes sur votre site WordPress !