无法移动圆圈内的图标
Unable to move icon inside the circle
我正在尝试将 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。
您没有以正确的方式应用那些 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 上查看。
您如何尝试将这些元素与 CSS 放在一起?
您可能需要单独定位图标,以便将它们放置在您想要的位置和方式。这可以通过以下方式完成:
.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}
例如,您可以通过更改顶部值和左侧值中的像素来在屏幕上移动图标。
我正在尝试将 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。
您没有以正确的方式应用那些 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 上查看。
您如何尝试将这些元素与 CSS 放在一起?
您可能需要单独定位图标,以便将它们放置在您想要的位置和方式。这可以通过以下方式完成:
.fa-stack{position: relative;}
.fa-circle{position:absolute; top: 10px; left: 10px;}
.fa-graduation-cap{position:absolute; top: 20px; left: 10px;}
例如,您可以通过更改顶部值和左侧值中的像素来在屏幕上移动图标。