Ajouter des icônes pour réseaux sociaux au thème Sparkling

écrit par Marie Last updated on mai 22, 2017

Published on 12 mars 2016

Sparkling

Aujourd’hui, j’ai rencontré un petit problème avec le thème que j’utilise actuellement pour le blog. Je souhaitais ajouter une icône dans le menu pour les réseaux sociaux qui pointerait vers StackOverflow.

À travers quelques recherches sur Google, j’ai pu trouver ce sujet qui m’a guidée vers l’ajout d’un icône qui n’est pas géré de base par le thème. Comme on peut le lire sur la documentation du thème, celui-ci gère plusieurs liens de base : Facebook, Twitter, Dribbble, Flickr, Google+, Skype, Pinterest.com, LinkedIn, Vimeo, Tumblr, Instagram, RSS, SoundCloud, Foursquare, Github, Spotify et les courriels.

Si vous souhaitez avoir un autre type de réseau social, vous êtes dans l’obligation d’ajouter cette icône par vous-mêmes. Ce guide va vous guider pas à pas pour ajouter le support d’un nouvel icône!

 

Réseaux sociaux

 

Guide pas à pas

  1. À partir du tableau de bord de votre WordPress, allez dans Apparence > Modifier le CSS.
  2. Ajoutez le bout de code ci-dessous. Changez stackoverflow.com par le site que vous souhaitez supporter.
    #menu-social li a[href*="stackoverflow.com"] .fa:before, .fa-lastfm:before {
    content: "f16c";
    }
    #menu-social li a[href*="stackoverflow.com"]:hover {
    background: #F48024;
    }
    
  3. Pour la propriété « content », vous allez devoir aller visiter le site Font Awesome que Sparkling utilise pour aller chercher des icônes. Si votre icône n’est pas référencée sur ce site, eh bien vous allez devoir vous compliquer la vie un peu plus. Pour ma part, comme je souhaitais ajouter un lien vers StackOverflow, c’est cette icône que j’ai cherché.
    Font Awesome
  4. Si vous regardez sous les icônes de stackoverflow, il y a « Unicode: » suivi d’une valeur « f16c ». C’est cette valeur que vous allez remplacer pour la propriété CSS du content. Conservez le backslash ().
  5. Ensuite, il ne vous reste qu’à définir le code de couleur que vous désirez en background avec un site comme celui-ci.

Vous pourriez aimer

Écrire un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.