无法在圆圈内移动图标答案

【问题标题】：Unable to move icon inside the circle无法在圆圈内移动图标
【发布时间】：2016-02-17 03:49:57
【问题描述】：

我正在尝试将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 是颜色的引导类。

【问题讨论】：

为什么你认为毕业帽应该在你的代码中的圆圈内？

标签： html css twitter-bootstrap font-awesome

【解决方案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>

如果您希望它更大，只需在 span 中添加一个类 fa-2x、fa-3x、fa-4x 或 fa-5x，仅此而已。

在fiddle 上查看。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：