如何在css中的链接之前添加图标img

【问题标题】：how to add icon img before a link in css如何在css中的链接之前添加图标img
【发布时间】：2015-09-15 10:02:22
【问题描述】：

如何在链接前添加图标 img？例如，我将如何在我的链接之前放置一个图标电话图像。

我已经通过 css 放置了一个图标图像，但它显示在链接文本的顶部。我只希望图标的位置在文本之前，但是当我尝试设置一个位置时，它会移动整个链接文本用它。我不想改变链接文本的位置，只是要在它之前设置的图标的位置。

【问题讨论】：

将图标和链接放在不同的div中，然后给它们样式 display:inline-block;你完成了.. :)

标签： css icons

【解决方案1】：

来自font awesome的一个简单例子

我想这就是你想要的。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

【讨论】：