WordPress中的HTML / CSS社交媒体图标非常庞大

Question

我正在尝试通过HTML代码将社交媒体按钮添加到我的WordPress页面：

但是，它们的样式不起作用，它们会占用整个页面并且太大了。为什么会发生这种情况，我可以解决它吗？

以下是代码：

Array (
    [Photo] => Array (
        [name] => 14670896179861993968797.jpg
        [type] =>
        [tmp_name] =>
        [error] => 1
        [size] => 0
    )
)

Answer 1

当样式被另一个样式覆盖时，最好的解决方法是使用更强的选择器：

#share-buttons a img { /* added 'a' */
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

有关CSS特异性的更深入解释，请阅读this CSS Tricks article。

Answer 2

相反，为＆＃39; a＆＃39;定义特定尺寸。标签并将图像设置为100％宽度。

#share-buttons a { width:35px, display:inline-block}
#share-buttons a img {width: 100%}

同样，删除＆＃39; a＆＃39;中的宽度参数。标签

Answer 3

添加此内容，

#share-buttons {
width: 100%;
height:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#share-buttons > a{
  text-decoration:none;
}
#share-buttons > a > img{
  width:35px;
  height:35px;
}

Answer 4

#share-buttons img {
    max-width: 100%;
    height: auto;
}

#share-buttons a {
    width: 35px !important;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline-block;
}