i 标签不显示在按钮标签内答案

【问题标题】：i tag doesn't show inside button tagi 标签不显示在按钮标签内
【发布时间】：2020-04-13 09:53:52
【问题描述】：

在按钮中 - 文本正常显示，但是当我将 fontawesome 图标放入其中时 - 就像可见性：隐藏。按钮样式：

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>

更新 - 当我更改浏览器缩放时，我看到... image

【问题讨论】：

图标有空间但不可见。
在图片上我也尝试用输入字符长度做标签，比如 20/100

标签： html css font-awesome htmlbutton

【解决方案1】：

您需要考虑固定版本 (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>

普通版仅在the PRO package提供

但是如果你想拥有普通版本的视觉效果，你可以用两个图标来构建它：

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>

【讨论】：

问题是我有专业版...该图标在 div 等其他标签中有效，但在按钮标签中无效
我测试一下你输入的内容。不管怎样，谢谢你的回答
@TimothyHill 分享你的完整代码，你肯定有更多的 CSS 参与
是的...我使用模板是因为它是一项创造性工作（8 年级的学校项目），我不关心它，因为我需要快速完成（保护将在 5 月14）。对不起，如果我的英语不是很好（我住在爱沙尼亚）。