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

2 Views

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.

Read More

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.

Post Views: 2

Related posts

1 comment

  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";
}

Comments are closed.