当我尝试使堆栈变大时，字体真棒图标堆栈不起作用

Question

我目前正在做以下设计：

圆圈在这张照片上看起来还可以，但在较大的设计中它真的太小了，所以我想把它弄大，这是我目前的代码：

<span class="fa-stack fa-3x course-status-icon">
     <i class="fa fa-circle fa-stack-2x"></i>
     <strong class="fa-stack-1x circle-text">
           Done!
     </strong>
</span>

现在让它变大的明智做法是：

<span class="fa-stack fa-5x course-status-icon">
         <i class="fa fa-circle fa-stack-3x"></i>
         <strong class="fa-stack-2x circle-text">
               Done!
         </strong>
    </span>

但这根本行不通，所以我正在寻找一些帮助 :) 我已经为我的情况制作了一个 fiddle 并添加了一些我当前的 css 和一些测试标记： jsfiddle to make it easier to help

非常感谢！

Answer 1

你的意思是这样？

https://jsfiddle.net/7LxwjLwr/3/

i.circle-text {
    font-size: 14pt;
    font-weight: bold;
    color: #FFF;
    font-style: normal;
}

Answer 2

要更改圆圈的大小，甚至更改圆圈内的文本，只需更改该元素的选择器（在本例中为 fa-circle）的字体大小

Answer 3

更改我在快照中提到的 fa fa 图标大小

Answer 4

保持圆圈和文本的大小，但将跨度设为 5x 而不是 lg。

    <span class="fa-stack fa-5x course-status-icon">
        <i class="fa fa-circle fa-stack-2x"></i>
       <strong class="fa-stack-1x circle-text">
       Done!
       </strong>
   </span>

我自己以前也遇到过这个问题，并尝试更改堆叠图标的大小，但由于某种原因，这只是把所有东西都扔掉了，改变跨度对我有用。希望对您有所帮助！

当我尝试使堆栈变大时，字体真棒图标堆栈不起作用

Font awesome icon stack doesn't quite work when i try to make the stack larger

html

css

font-awesome