社交媒体图标没有出现

Question

我试图让社交媒体图标出现在网站上但由于某种原因他们没有出现.在这里小提琴 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演示