css - 使用背景图像的社交图标

Question

被这个卡住了一段时间。

我似乎无法让社交图标图像出现在此页面的页脚上。我已经尝试了几件事无济于事。

首先，我认为我的背景: url() 声明错误。

这就是我所拥有的。

<div class="footer">
    <ul class="links">
        <li class="fb">Facebook</li>
        <li class="tw">Twitter</li>
    </ul>
</div>

和CSS

.footer {
    background-color: #222;
    width: 100%;
    padding: 20px;
} 

.links {
    text-align: right;
}

.links ul {
    display: block;
    text-align: right;
}

.links li {
    display: inline-block;
    color: white;
    padding-right: 70px;
}

.fb {
    background: url(http://www.lucianooliveira.net/wp-content/uploads/2014/08/facebookr-48.png)no repeat;
    background-position: center;
   }

  .tw   {  background: url(http://www.lucianooliveira.net/wp-content/uploads/2014/08/twitter-48.png)no repeat;
background-position: center;

}

我知道位置中心不正确，但我只是想让图标显示在那里作为初学者，然后在我能够看到图标后调整位置....

这是一个 fiddle http://jsfiddle.net/Lucky500/g2kuLb70/1/

Answer 1

您在背景的不重复部分缺少连字符:

background: url(http://www.lucianooliveira.net/wp-content/uploads/2014/08/twitter-48.png) no-repeat;

jsFiddle example