温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - ReactJs overlay Font awesone Icons
reactjs icons font-awesome

其他 - ReactJs覆盖字体超赞图标

发布于 2020-03-27 15:54:40

我想问一下我们如何在ReactJS中堆叠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} />

如何在用户上堆叠一个圆圈,使其看起来像“标记”图标在圆圈中

查看更多

查看更多

提问者
Abdullah Mufti
被浏览
26
Emanuele Scarabattoli 2020-01-31 16:49

哟可以做这样的事情,并发挥与positioningflex

.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>