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

Question

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

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

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

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

<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 */
}

Поиграйте с отступами и, возможно, с полями, пока не получите желаемый результат. Вы также можете поиграть с положением фонового изображения (* кивком Тому Райту) с помощью «background-position» или полностью определить «background» ( ссылка на w3 ).

Answer 2

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

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

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

Редактировать

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

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;
}