• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • Les icônes sont fascinantes!

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

    C'est pourquoi icônes sont largement utilisés partout, y compris 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 pouvez-vous sauter ce cycle de l'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 d'images inutiles qui ralentissent le vitesse de la page.

    Alors, explorons Dashicons et comment vous pouvez les utiliser efficacement sur votre site Web 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 adapter à n'importe quelle taille sans pixellisation.

    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 le site officiel Ressources pour les développeurs WordPress.

    Ils ont catégorisé 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 articles
    • 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 des polices d'icônes.

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

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

    Découvrons 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 des alphabets, les symboles vectoriels sont présents dans les polices d'icônes.

    Est-ce que cela est devenu trop technique?

    Laissez-moi 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 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 enregistrer 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 de la page.
    • Facile à utiliser et à ajuster 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?

    Utiliser Dashicons n'est pas une technique de fusée.

    Croyez-moi; Je connais les deux: 0

    Suivez simplement les étapes mentionnées ci-dessous pour démarrer avec WordPress Dashicons.

    Étape 1: Activez Dashicons sur votre site WordPress

    Avant de commencer, activez les Dashicons là où vous avez besoin, par exemple, d'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 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 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 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'emplacement choisi.
    • Modifier l'apparence des icônes à l'aide de CSS personnalisé

    C'est tout.

    De plus, par défaut, toutes les icônes ont une taille de 20 pixels. Vous pouvez le modifier en utilisant les éléments CSS 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 vous pouvez utiliser 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 "Libellé de navigation" du tableau de bord
    • Cliquez sur le bouton «enregistrer» puis chargez la page d'accueil. Il devrait afficher l'icône fraîche et nette.

    2. Utilisation sur post meta

    Vous pourrez utiliser 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 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 voulez 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 shortcode

    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 déranger 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, «beauté et cerveaux» est une combinaison rare.

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