通过PHP向浸泡的窗口小部件添加新的社交网络-错误的图标显示 [英] Adding new social network to socmed widget through PHP -- Wrong icon showing

问题描述

让我为自己的无知向您道歉；我从来没有真正看到过PHP，并且对Wordpress领域真的很陌生...

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...

我使用此教程向社交媒体小部件添加了Pinterest选项.附加功能有效，在小部件中为我提供了新的Pinterest选项.该小部件在仪表板侧显示"Pinterest"，并在前端完美地链接到Pinterest.

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.

问题是该网站显示的是Google+图标，而不是Pinterest图标.更奇怪的是，当您检查元素"时，html会指定pinterest.png图标，但是，当然会显示Google+图标.我现在唯一能做的就是挠头……

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…

任何帮助将不胜感激.我什至不确定我需要在这里包括什么:我编辑过的整个php文件?该网站的链接?我很乐意提供所需的一切.

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.

谢谢大家的帮助.

推荐答案

所以这里发生的是图像隐藏在main-style.css的第56行:

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

然后通过伪元素(:after)添加Google+图标，该伪元素使Google+图像前面带有图标字体:

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

所以您需要做的是为Pinterest图标添加另一个css规则，如下所示:

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

应该做到这一点.

更新

如果您想使用Font Awesome Pinterest图标，请删除我们之前添加的两行，并添加以下内容:

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

这篇关于通过PHP向浸泡的窗口小部件添加新的社交网络-错误的图标显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！