Question

我正在尝试将社交媒体图标显示在网站上，但出于某种原因，它们不会显示在此处。Fiddle此处。 HTML：

<span id="Facebook"><a href="#" target="_blank" ></a>
<span id="Twitter"><a href="#" target="_blank" ></a>
<span  id="LinkedIn"><a href="#" target="_blank" ></a>

CSS：

#Facebook{
      height:26px;
      width:26px;
}
#Twitter{
      height:26px;
      width:26px;
}
#LinkedIn{
      height:26px;
      width:26px;
}

#Facebook a{
      background-image: url('http://paksef.com/wp-content/uploads/2015/08/facebook-icon-hover.png');

}

#Facebook a:hover{
      background-image: url('http://paksef.com/wp-content/uploads/2015/08/facebook-icon.png');
}

#Twitter{
      background-image: url('http://paksef.com/wp-content/uploads/2015/08/twitter-icon-hover.png');

}

#Twitter a:hover{
      background-image: url('http://paksef.com/wp-content/uploads/2015/08/twitter-icon.png');

}

#LinkedIn{
      background-image: url('http://paksef.com/wp-content/uploads/2015/08/Linkedin-icon-hover.png');

}
#LinkedIn a:hover{
      background-image: url('http://paksef.com/wp-content/uploads/2015/08/Linkedin-icon.png');

}

Answer 1

你有一些错误阻止它工作。
首先，将它放在StackOverflow上时可能只是一个意外，但你永远不会关闭跨度：

<span id="Facebook"><a href="#" target="_blank" ></a></span>
<span id="Twitter"><a href="#" target="_blank" ></a></span>
<span  id="LinkedIn"><a href="#" target="_blank" ></a></span>

其次，您尝试为跨度添加宽度和高度，默认情况下为内联元素：

#Facebook, #Twitter, #LinkedIn {
      height:26px;
      width:26px;
      display:inline-block;
}

最后，您将背景图像应用于<a>，但它们没有宽度或高度：

#Facebook a, #Twitter a, #LinkedIn a{
    background-size:contain;
    display:inline-block;
    height:100%;
    width:100%;
}

JSFiddle Demo

Answer 2

＆＃13;

#Facebook,
#Twitter,
#LinkedIn {
  display: inline-block;
  width: 26px;
  height: 26px;
}
#Facebook {
  background-image: url('http://paksef.com/wp-content/uploads/2015/08/facebook-icon-hover.png');
}
#Facebook:hover {
  background-image: url('http://paksef.com/wp-content/uploads/2015/08/facebook-icon.png');
}
#Twitter {
  background-image: url('http://paksef.com/wp-content/uploads/2015/08/twitter-icon-hover.png');
}
#Twitter:hover {
  background-image: url('http://paksef.com/wp-content/uploads/2015/08/twitter-icon.png');
}
#LinkedIn {
  background-image: url('http://paksef.com/wp-content/uploads/2015/08/Linkedin-icon-hover.png');
}
#LinkedIn:hover {
  background-image: url('http://paksef.com/wp-content/uploads/2015/08/Linkedin-icon.png');
}

＆＃13;

<a href="#" target="_blank" id="Facebook"></a>
<a href="#" target="_blank" id="Twitter"></a>
<a href="#" target="_blank" id="LinkedIn"></a>

＆＃13;

社交媒体图标没有出现

2 个答案:

JSFiddle Demo