通过css将图像添加到文本的左侧

我怎样才能通过CSS添加图像到一些文本？

我有这个：

<span class="create">Create something</span> 

我想用css在左边添加一个16×16的图片。 这是可能的，或者我应该手动添加这个图像像这样：

 <span class="create"><img src="somewhere"/>Create something</span> 

我宁愿不必手动改变所有的地方，这就是为什么我想通过CSS来做到这一点。

谢谢！

Answer 1

 .create { background-image: url('somewhere.jpg'); background-repeat: no-repeat; padding-left: 30px; /* width of the image plus a little extra padding */ display: block; /* may not need this, but I've found I do */ } 

玩填充和可能的余地，直到你得到你想要的结果。 你也可以使用“背景位置”来播放背景图像的位置（*对汤姆·赖特点头）或完全定义“背景”（ 链接到w3 ）。

Answer 2

非常简单的方法：

 .create:before { content: url(image.png); } 

适用于所有现代浏览器和IE8 +。

编辑

不要在大型​​网站上使用这个。 在伪元素在性能方面是可怕的。

Answer 3

尝试像这样：

 .create { margin: 0px; padding-left: 20px; background-image: url('yourpic.gif'); background-repeat: no-repeat; } 

Answer 4

这很好

 .create:before{ content: ""; display: block; background: url('somewhere.jpg') no-repeat; width: 25px; height: 25px; float: left; }