ReactJs 覆盖字体真棒图标答案

【问题标题】：ReactJs overlay Font awesone IconsReactJs 覆盖字体真棒图标
【发布时间】：2024-01-11 02:47:01
【问题描述】：

我想问一下我们如何在 ReactJS 中堆叠 Font Awesome 图标。

在 HTML 中我们使用以下代码：

<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

在 ReactJS 中我们使用：

<FontAwesomeIcon icon={faFlag} />

如何在用户上堆叠一个圆圈，使其看起来好像标志图标在圆圈中

【问题讨论】：

标签： reactjs icons font-awesome

【解决方案1】：

您可以在提供的 CSS 中使用“分层”来做同样的事情：

<span className="fa-layers fa-fw fa-2x">
  <FontAwesomeIcon icon={faCircle} />
  <FontAwesomeIcon icon={faFlag} inverse transform="shrink-5" />
</span>

【讨论】：

【解决方案2】：

你可以做类似的事情并与positioning和flex一起玩：

.the-wrapper {
  position: relative;
}

.the-wrapper .icon {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>

<span class="fa-stack fa-2x the-wrapper">
  <FontAwesomeIcon icon={faCircle} />
  <div class="icon">
    <FontAwesomeIcon icon={faFlag} />
  </div>
</span>

【讨论】：