无法移动圆圈内的图标

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 class。

Answer 1

您没有以正确的方式应用那些 classes way/order。

按照 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>

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

在这个 fiddle 上查看。

Answer 2

您如何尝试将这些元素与 CSS 放在一起？

您可能需要单独定位图标，以便将它们放置在您想要的位置和方式。这可以通过以下方式完成：

.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}

例如，您可以通过更改顶部值和左侧值中的像素来在屏幕上移动图标。

无法移动圆圈内的图标

Unable to move icon inside the circle

html

css

twitter-bootstrap

font-awesome

注：