如何使用图像样式列表

Question

您如何设置此代码的样式，以便在文本后添加社交媒体图标？

<li class="facebook"><a href="http://www.facebook.com/3ndvorg/">Follow On Facebook</a></li>

我想在“关注Facebook”文字后添加Facebook图片图标......

由于

Answer 1

在background标记中添加a，如下所示：

.facebook a { 
   padding-right: 20px; 
   background: url(yourimageurl.png) no-repeat right;
}

Demo on jsfiddle

编辑 updated demo，其实施与评论中的图片相匹配。

Answer 2

您可以将“图标”包含为img标记：

<li class="facebook"><a href="http://www.facebook.com/3ndvorg/">Follow On Facebook&nbsp;<img src="path/to/icon.jpg" alt="Facebook Icon" /></a></li>

或者你可以使用类似的东西：

.facebook a {
    background: url('path/to/icon.png') right center no-repeat;
    padding-right: 10px; /* icon width + some pixels for spacing */
}