Adding new social network to socmed widget through PHP -- Wrong icon showing

Question

Let me just apologize up front for my ignorance; I've never really seen PHP up-close and am really new to the Wordpress world...

I added a Pinterest option to a social media widget using this tutorial. The addition worked, giving me a new Pinterest option in the widget. The widget says 'Pinterest' on the dashboard side and links to Pinterest perfectly on the front end.

The problem is the site is displaying a Google+ icon instead of a Pinterest icon. What's even weirder is that when you 'inspect element' the html is specifying the pinterest.png icon—but, of course, showing the Google+ icon. All I can really do is scratch my head at this point…

Any help would be appreciated. I'm not even sure what I need to include here: the whole php file that I edited? a link to the site? I'm happy to provide whatever I need to.

Thanks for the help, guys.

Answer 1

So what's going on here is that the image is hidden on line 56 of main-style.css:

.social.social__row li.social_li a .social_ico img,
.social__list li.social_li a .social_ico img
{ display:none !important; }

And the Google+ icon is added via a pseudo element (:after) who get the Google+ image front an icon font:

.social.social__row li.social_li:last-child a .social_ico:after,
 .social__list li.social_li:last-child a .social_ico:after 
{ content:"\f0d5"; }

So what you need to do is to add an other css rule for your Pinterest icon, something like that :

.social.social__row li.social_li a.social_link__pinterest .social_ico img {
    display: block !important;
}
.social.social__row li.social_li:last-child a.social_link__pinterest .social_ico:after {
    display: none;
}

Should do the trick.

UPDATE

If you want to use the Font Awesome Pinterest icon, delete the two lines we added before, and add this :

.social.social__row li.social_li:last-child a.social_link__pinterest .social_ico:after {
    content: "\f0d2";
}