Ответ 1

Я обычно использую background:

<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;

padding-left: 16px; /* Or size of icon + spacing */
}
</style>

<span class="icon">Some text here</span>

Ответ 2

Вы можете сделать это в той же строке, используя выравнивание по вертикали и высоту линии

<p style='line-height: 30px'>
  <img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>

В качестве альтернативы вы можете использовать фоновый подход без повтора и позиционирования:

span.icontext {
  background: transparent url(icon.gif) no-repeat inherit left center;
  padding-left: 10px /* at least the width of the icon */
}

<span class="icontext">
  Icon Text
</span>

Ответ 3

К сожалению, ни один из этих ответов не является доказательством пули, и у каждого из них есть один большой недостаток.

@rossipedia Я использовал все мои значки таким образом, и он работает очень хорошо. Но, и это большое, но это не работает с спрайтами, так как вы используете свойство background-position для размещения значка внутри контейнера, который включает ваш текст. И не использовать спрайты, где вы можете плохо для производительности и SEO, что делает их обязательными для любого хорошего современного веб-сайта.

@Джейми Вонг Первое решение имеет два недостатка разметки. Использование элементов семантически правильно недооценивается некоторыми, но вы увидите преимущества в определении приоритетов в своем ранжировании в поисковых системах. Поэтому, прежде всего, вы не должны использовать p-тег, когда контент не является абзацем. Вместо этого используйте span. Во-вторых, img-тег предназначен только для контента. В очень конкретных случаях вам, возможно, придется игнорировать это правило, но это не один из них.

Мое решение: Я не буду врать тебе, я проверил во многих местах в свое время и ИМХО, нет оптимального решения. Эти два решения - те, которые ближе всего к этому относятся:

Решение встроенного блока

HTML:
<div class="container">
  <div class="icon"></div>
  <span class="content">Hello</span>
</div>

CSS:
.container {
   margin-top: 50px;
}

.container .icon {
    height: 30px;
    width: 30px;
    background: #000;
    display: inline-block;
    vertical-align: middle;
}
.container .content {
    display: inline-block;
    vertical-align: middle;
}

"дисплей: встроенный блок;" это прекрасная вещь. Вы можете сделать так много с этим, и он играет очень красиво с отзывчивым дизайном. Но зависит от вашего клиента. Inline-Block не работает с IE6, IE7 и все еще вызывает проблемы с IE8. Я лично больше не поддерживаю IE6 и 7, но IE8 все еще там. Если вашему клиенту действительно нужен его сайт для использования в IE8, встроенный блок, к сожалению, не является вариантом. Оцените это первым. Замените черный фон элемента значка своим спрайтом, расположите его, не бросайте туда-сюда и вуаля, вот оно. О да, и в качестве плюса вы можете выровнять текст по своему желанию с помощью вертикального выравнивания.

P.S.: Я знаю, что там есть пустой тег HTML, если у кого есть предложение о том, как его заполнить, я был бы благодарен.

Решение с фиксированной высотой

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
.container {
    margin-top: 50px;
    border: 1px solid #000;
}

.container .icon {
    height: 30px;
    width: 30px;
    background: #000;
    float:left;
}
.container .content {
    line-height: 30px;
    float: left;
    display: block;
}

Я ненавижу этот. Он использует фиксированную высоту строки для текста, и если вы выберете ту же высоту, что и поле "Значок", текст будет центрирован до этой высоты. Чтобы выровнять текст вверху, отрежьте высоту линии, а внизу, вам нужно будет исправить это с положением: абсолютным и фиксированной шириной и высотой для контейнера. Я не буду вдаваться в это, если кто-то не попросит об этом, потому что это целая проблема для себя и приносит с собой множество недостатков. Основным недостатком этого пути является фиксированная высота. Исправленные высоты всегда негибкие и особенно с текстом, это может вызвать множество проблем (вы больше не можете масштабировать текст как пользователь без его обрезания, а другие браузеры визуализируют текст по-разному). Поэтому не забудьте, что в браузере текст отключен и что у него есть какая-то маховая комната внутри его высоты линии. P.S.: Не забывайте clearfix для контейнера. И, конечно же, замените черный фон вашим спрайтом и положением + no-repeat.

Заключение

Используйте встроенный блок, если это вообще возможно.;) Если это не так, глубоко вдохните и попробуйте второе решение.