Добавить изображение слева от текста через css

Как добавить изображение в текст через css?

У меня есть это:

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

и я хочу добавить изображение 16x16 слева от него с помощью css. Возможно ли это, или я просто вручную добавлю это изображение следующим образом:

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

Мне бы не пришлось вручную менять все места, поэтому я хотел сделать это через css.

спасибо!

Ответ 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).

Ответ 2

Очень простой метод:

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

Работает во всех современных браузерах и IE8 +.

Edit

Не используйте это на больших сайтах.: Перед псевдоэлементом ужасно с точки зрения производительности.

Ответ 3

Попробуйте что-то вроде:

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

}

Ответ 4

Это отлично работает

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