я тег не отображается внутри тега кнопки - PullRequest
Новая
       111

я тег не отображается внутри тега кнопки

0 голосов
/ 13 апреля 2020

В кнопке - текст отображается нормально, но когда я помещаю в него потрясающий значок - это похоже на видимость: скрытый. Стиль кнопки: 

margin-left: 10px;
background: rgba(0, 196, 65, 100);
color: #fff;
font-weight: bold;
cursor: pointer;
transition: background 0.23s;

HTML: 

<button type="submit" class="msger-send-btn">
    <i class="far fa-arrow-circle-right"></i>
</button>

Обновление - при изменении масштаба браузера я увидел, что ... изображение

1 Ответ

0 голосов
/ 13 апреля 2020

Вы должны рассмотреть версию solid (fas), а не обычную (far) 

button {
  margin-left: 10px;
  background: rgba(0, 196, 65, 100);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<button type="submit" class="msger-send-btn">
    <i class="fas fa-arrow-circle-right fa-5x"></i>
</button>

Обычная версия доступна только в пакете PRO

Но если вы хотите, чтобы изображение Обычную версию вы можете построить с двумя иконками: 

button {
  margin-left: 10px;
  background: rgba(0, 196, 65, 100);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<button type="submit" class="msger-send-btn">
    <span class="fa-stack fa-3x" >
      <i class="far fa-circle fa-stack-2x"></i>
      <i class="fas fa-arrow-right fa-stack-1x"></i>
    </span>
</button>

Похожие: Font Awesome 5 - как поместить значок внутри круга?

...