html - 无法移动圆圈内的图标

Question

我试图将 fa-graduation-cap 放在一个圆圈内。

所以，这意味着:

<span class="fa-stack">
  <i class="fa fa-circle fa-stack-4x text-primary"></i>
  <i class="fa fa-graduation-cap fa-2x"></i>
</span>

但它不起作用。输出是这样的:

graduation-cap 在圆圈外。这是为什么？

---

备注:

text-primary 是颜色的 Bootstrap 类。

Answer 1

您没有以正确的方式/顺序应用这些类。

遵循 examples 中的代码，我们开始吧。

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x text-primary"></i>
  <i class="fa fa-graduation-cap fa-stack-1x fa-inverse"></i>
</span>

如果你想让它更大，只需添加一个类 fa-2x、fa-3x、fa-4x 或 fa-5x 到 span，没有别的。

检查这个fiddle .