Ищите альтернативу добавлению тега <img>внутри тега заголовка <h>

Question

Я вижу много сообщений о добавлении тега "img" внутри тега "header" и из чего Я вижу, что это плохая практика, хотя она и делает то, что предназначено для меня. Я хотел бы знать альтернативный способ правильного форматирования, как я хочу.

У меня есть значок изображения, который я пытаюсь разместить слева от "h4" тег на той же строке. Единственный способ понять, как это сделать, заключается в следующем:

<div class="col-md-4 service-header-bar">
  <h4 class="service-heading"><img src="img/icons/wheel-icon.png" class="icon-size" alt="Furnace Servicing">Furnace Servicing</h4>
  <p class="text-muted service-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>

.page-section .service-header-bar .icon-size {
  margin-right: 20px;
  max-width: 50px;
}
.page-section h2.section-heading {
  font-size: 45px;
  margin-top: 0;
  margin-bottom: 15px;
  font-family: 'Gotham';
  font-weight: 700;
}
.page-section p.service-paragraph {
  margin-left: 71px;
  margin-right: 35px;
}
.service-heading {
  margin: 15px 0;
  text-transform: none;
}

Вот скриншот того, что выдает мой код, хотя я хотел бы получить тот же результат без использования тега img внутри ах тег.

https://gyazo.com/f139612f2902d5c0152f2eb33026af2c

Заранее спасибо,

Ник

Answer 1

Спасибо за обратную связь и помощь, добавив "float: left" в:

.page-section .service-header-bar .icon-size {
  float: left;   
  margin-right: 20px;
  max-width: 50px;
}

сделал именно то, что я хотел.

Ник

Answer 2

Чтобы избежать использования тега img, вместо заголовка можно использовать фоновое изображение. А затем расширить класс для разных изображений. Скрипка здесь .

Разметка:

<h1 class="heading-icon">Heading</h1>
<h1 class="heading-icon heading-icon-blue">Heading</h1>

CSS:

.heading-icon {
  padding-left: 50px;
  background: url("http://placehold.it/25x25") left center no-repeat;
  background-size: contain;
}

.heading-icon-blue {
  background: url("http://placehold.it/25x25/1382d2") left center no-repeat;
}