【发布时间】：2011-06-15 20:42:15
【问题描述】：
您将如何设置此代码的样式，以便我在文本后添加一个社交媒体图标？
<li class="facebook"><a href="http://www.facebook.com/3ndvorg/">Follow On Facebook</a></li>
我想在“Follow On Facebook”文本之后添加 Facebook 图片图标...
谢谢
【问题讨论】：
【发布时间】：2011-06-15 20:42:15
【问题描述】：
将background 添加到a 标记中，如下所示：
.facebook a {
padding-right: 20px;
background: url(yourimageurl.png) no-repeat right;
}
编辑： updated demo 实现匹配 cmets 中的图像。
【讨论】：
-
+1，我认为最可靠的跨浏览器支持方法。
-
以上仅适用于我的 Facebook 图标，不适用于列表中的其他图标 - 这是它现在的样子 d.pr/7tuG
-
@user550408：您需要为每个选择器创建不同的 CSS 选择器：
.facebook a、.twitter a和.rss a。 Click for demo.
您可以将“图标”包含为img 标签：
<li class="facebook"><a href="http://www.facebook.com/3ndvorg/">Follow On Facebook <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 */
}