как разместить иконку на около текста label в табе

Question

Не могу разобраться, как разместить иконку на label, слева от текста. Пробовал тег img, прописывая for="" для каждого label, и вся верстка таба рушиться. Картинку во вложении - это так, как необходимо. Помогите, пожалуйста.

[![введите сюда описание изображения][1]][1]

.rate_selector {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.rate_selector_content {
  display: flex;
  justify-content: space-between;
  width: 1300px;
  max-width: calc(100% - 100px);
  margin: 50px 0 50px 0;
}

.rate_selector_content_tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0;
  width: 100%;
}

.rate_selector_content_tabs>input[type="radio"] {
  display: none;
}

.rate_selector_content_tabs>div {
  display: none;
  border: 1px solid #e0e0e0;
  background-color: #FAFAFA;
  font-size: 16px;
}

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
  display: flex;
  width: 100%;
  height: auto;
}

.rate_selector_content_tabs>label {
  display: inline-block;
  user-select: none;
  border: 1px solid #e0e0e0;
  border-radius: 5px 5px 0 0;
  font-size: 16px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  cursor: pointer;
  position: relative;
  width: calc(25% - 5px);
  height: 70px;
  top: 1px;
}

.rate_selector_content_tabs>label:not(:first-of-type) {
  /* border-left: none; */
}

.rate_selector_content_tabs>input[type="radio"]:checked+label {
  background-color: #FAFAFA;
  border-bottom: 1px solid #FAFAFA;
}

 <div class="rate_selector">
                <div class="rate_selector_content">
                    <div class="rate_selector_content_tabs">
                        <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
                        <label for="tab-btn-1">text 1</label>
                        <input type="radio" name="tab-btn" id="tab-btn-2" value="">
                        <label for="tab-btn-2">text 2</label>
                        <input type="radio" name="tab-btn" id="tab-btn-3" value="">
                        <label for="tab-btn-3">text 3</label>
                        <input type="radio" name="tab-btn" id="tab-btn-4" value="">
                        <label for="tab-btn-4">text 4</label>
                    
                        <div id="content-1">
                            text content 1
                        </div>
                        <div id="content-2">
                          text content 2
                        </div>
                        <div id="content-3">
                          text content 3
                        </div>
                        <div id="content-4">
                           text content 4
                          </div>
                      </div>
                </div>
            </div>

Answer 1

Не знаю, чем Вам не угодил тег <img>, но каких-то альтернатив я не вижу. Главная задача - позиционирование. Добавил картинки и комментарии в CSS:

.rate_selector {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.rate_selector_content {
  display: flex;
  justify-content: space-between;
  width: 1300px;
  max-width: calc(100% - 100px);
  margin: 50px 0 50px 0;
}

.rate_selector_content_tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0;
  width: 100%;
}

.rate_selector_content_tabs>input[type="radio"] {
  display: none;
}

.rate_selector_content_tabs>div {
  display: none;
  border: 1px solid #e0e0e0;
  background-color: #FAFAFA;
  font-size: 16px;
}

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4 {
  display: flex;
  width: 100%;
  height: auto;
}

.rate_selector_content_tabs>label {
  user-select: none;
  border: 1px solid #e0e0e0;
  border-radius: 5px 5px 0 0;
  font-size: 16px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  cursor: pointer;
  position: relative;
  width: calc(25% - 5px);
  height: 70px;
  top: 1px;
  /* изменил */
  display: inline-flex;
  /* добавил */
  justify-content: center;
  align-items: center;
}

/* добавил */
.rate_selector_content_tabs>label img {
  margin-right: 10px;
}

.rate_selector_content_tabs>label:not(:first-of-type) {
  /* border-left: none; */
}

.rate_selector_content_tabs>input[type="radio"]:checked+label {
  background-color: #FAFAFA;
  border-bottom: 1px solid #FAFAFA;
}

<div class="rate_selector">
  <div class="rate_selector_content">
    <div class="rate_selector_content_tabs">
      <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
      <label for="tab-btn-1"><img src="https://www.gravatar.com/avatar/56a05ea2da5602522c4886bcd8321e78?s=32&d=identicon&r=PG&f=1">text 1</label>
      <input type="radio" name="tab-btn" id="tab-btn-2" value="">
      <label for="tab-btn-2"><img src="https://www.gravatar.com/avatar/56a05ea2da5602522c4886bcd8321e78?s=32&d=identicon&r=PG&f=1">text 2</label>
      <input type="radio" name="tab-btn" id="tab-btn-3" value="">
      <label for="tab-btn-3"><img src="https://www.gravatar.com/avatar/56a05ea2da5602522c4886bcd8321e78?s=32&d=identicon&r=PG&f=1">text 3</label>
      <input type="radio" name="tab-btn" id="tab-btn-4" value="">
      <label for="tab-btn-4"><img src="https://www.gravatar.com/avatar/56a05ea2da5602522c4886bcd8321e78?s=32&d=identicon&r=PG&f=1">text 4</label>

      <div id="content-1">
        text content 1
      </div>
      <div id="content-2">
        text content 2
      </div>
      <div id="content-3">
        text content 3
      </div>
      <div id="content-4">
        text content 4
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

как разместить иконку на около текста label в табе

Ответы (1 шт):