html - 当我尝试使堆栈变大时， Font Awesome 图标堆栈不起作用

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

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