无法在圈子内移动图标

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的代码，我们开始。

sonata_media
    cdn:
        server:
            path: /myproject/web/uploads/media

如果您希望它更大，只需将<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，其他任何内容。

在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;}

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