comment ajouter des icônes de médias sociaux dans wordpress sans plugins

Vous voulez ajouter des icônes de médias sociaux à votre site WordPress sans plugin?

Il y a une tonne de messages qui montrent comment ajouter des icônes en utilisant une police géniale, mais je vais vous montrer un moyen beaucoup plus simple sans avoir à ajouter d'icônes externes.

Si vous êtes quelqu'un qui prend la vitesse des pages au sérieux, vous allez adorer ça.

Dashicons est la police d'icônes officielle de WordPress. Ils apparaissent dans la barre latérale gauche de chaque backend d'administration de site WordPress.

Nous utiliserons ces icônes au lieu d'icônes externes. Cela libérera le navigateur de la demande de fichiers supplémentaires.

Suivez simplement ces étapes:

Étape 1

Ajoutez le widget HTML personnalisé dans la barre latérale ou le pied de page. Vous pouvez gérer les widgets sous Tableau de bord >>> Apparence >>> Widgets.

Étape 2

Collez ce code dans la zone de contenu

Dans ce code, nous affichons uniquement les icônes Facebook et Twitter.
Pour ajouter plus d'icônes, vous devrez personnaliser trois parties.

href est le lien vers votre page sociale
aria-label est le texte qui décrit le lien

Le troisième et le plus important est le class = "dashicons dashicons-facebook-alt"

Chaque police dans les Dashicons a une classe spécifique qui est utilisée pour afficher l'icône. On peut trouver la classe d'une icône en cliquant dessus

Remplacez cette pièce par celle que vous souhaitez utiliser

Par exemple, remplacez dashicons-facebook-alt pardashicons-coeuret l'icône du cœur s'affichera.

Étape 3.

Ajoutez ce CSS dans votre fichier Style.css de thèmes enfants ou dans votre option CSS supplémentaire du personnalisateur

.social-link-container {affichage: flex; } .social-link-container .social-link {remplissage: 3px; marge droite: 10px; } .dashicons {taille de la police: 30px; couleur: #fff; largeur: 40px; hauteur: 40px; rayon de la frontière: 50%; affichage: flex; justify-content: centre; align-items: centre; }

Ce code ci-dessus ajoutera tous les attributs des icônes à l'exception de la couleur. Utilisez le code ci-dessous pour ajouter de la couleur aux icônes qui ne seront visibles qu'alors.

.dashicons-facebook-alt {arrière-plan: # 1877F2; } .dashicons-twitter {arrière-plan: # 1DA1F2; }

Si vous ajoutez plus d'icônes, vous pouvez ajouter une couleur d'arrière-plan différente à chaque icône en utilisant sa classe et le CSS ci-dessus.

Vous voulez ajouter un simple effet de survol? Ajoutez ceci à votre CSS si vous souhaitez afficher un effet de survol 'Grow in'

.dashicons: hover {-webkit-transform: scale (1.2); -ms-transform: échelle (1.2); transformer: échelle (1,2); }

C'est tout! Maintenant, effacez le cache du site Web et vérifiez votre widget, il s'affichera comme ceci

Si vous suivez exactement les étapes, vous le ferez fonctionner.
Sinon, commentez ci-dessous et je peux vous aider à le résoudre.