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!
Guide pas à pas
- À partir du tableau de bord de votre WordPress, allez dans Apparence > Modifier le CSS.
- 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; } - 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é.
- 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 ().
- Ensuite, il ne vous reste qu’à définir le code de couleur que vous désirez en background avec un site comme celui-ci.
