html - 社交媒体图标未出现

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>

其次，您正在尝试向 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