Изображение не отображается на участке внутри кнопки

Question

В этой ссылке это выглядит как кнопка

<div class="button-row">
    <a href="<% url('/') class="btn-link btn-blue mbright {!! t("profile.unsuscribe_button_yes") !!}<span class="arrow-right"></span></a>
</div>

css

.button-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.arrow-right {
  background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
}

Изображение не отображается на кнопке, но я вижу его в инспекторе, Не знаю, в чем проблема.

Answer 1

Попробуйте указать минимальную высоту и минимальную ширину (или) высоту и ширину. поскольку это встроенный элемент, внутри него нет содержимого.

Попробуйте указать ниже в своем коде

.arrow-right {
    background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
    display: inline-block;
    min-width: 200px;
    min-height: 200px;
    background-size: 100%;
}

Answer 2

Причиной проблемы root является пустой диапазон с фоновым изображением .

По умолчанию ширина а высота пустого диапазона будет 0px . Это приводит к тому, что изображение скрывается.

Самый простой способ решить эту проблему - присвоить диапазону атрибуты высоты и ширины.

Вот пример создания фона изображение диапазона, видимого, когда диапазон пуст:

<div class="button-row">
  <a href="link-url-here">

    <!-- Set span dimensions to 20x20 to make the background visible -->
    <!-- Also, disable background repetition to show the image only once -->

    <span class="arrow-right arrow-image" 
          style="height: 20px; width: 20px; background-repeat: no-repeat;">
    </span>

  </a>
</div> 

Answer 3

ОБНОВЛЕНИЕ

Поскольку вы используете кнопки Bootstrap, вы ограничены пределами классов кнопок Bootstrap. Я видел, что вы можете использовать элемент <button> с тегом изображения внутри, но я не уверен, работает ли он по-прежнему в bootstrap 4.

Можете ли вы попробовать код, который я обновил в своем ответе (с использованием: before и двух классов).

---

Если это не сработает, удалите другие классы в вашем теге привязки и добавьте ширину и высоту к .arrow-right. Как только вы увидите изображение, начинайте добавлять классы, пока оно снова не исчезнет, ​​тогда вы знаете, что вам нужно для устранения неполадок.

HTML

<div class="button-row">
  <a href="<% url('/') class="btn-link btn-blue mbright {!! t("profile.unsuscribe_button_yes") !!}
    <span class="arrow-right arrow-image"></span>
  </a>
</div>  

---

CSS

.arrow-right:before {
  display: inline-block;
  background-color: transparent;
  background-position : center center;
  background-repeat:no-repeat;
}

.arrow-image:before {
  background-image: url('#{$iconsImagesPath}black-right-arrow.png');
}