Font Awesome JS 5：如何填充堆叠图标中的空白区域

嘿，我来帮你搞定这个小需求！你的基础堆叠代码已经实现了日历+时钟的组合，要给时钟内部填上白色，这里有两种简单可行的方案：

方案一：用Font Awesome原生图层加白色背景 #

我们可以直接在时钟图标下面加一个白色的圆形图层，利用data-fa-transform调整大小和位置，刚好适配时钟的内部区域：

<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<span class="fa-layers fa-4x">
  <i class="far fa-calendar-alt"></i>
  <!-- 白色圆形背景，和时钟的缩放/偏移保持一致 -->
  <i class="fas fa-circle" data-fa-transform="shrink-6 down-6 right-6" style="color: white;"></i>
  <i class="far fa-clock" data-fa-transform="shrink-6 down-6 right-6"></i>
</span>

这个方法完全用Font Awesome自带的图层系统，不用写额外的自定义CSS，要是觉得白色圆和时钟贴合度不够，微调shrink-*的数值就能搞定。

方案二：自定义CSS修改图标填充色 #

要是不想多一层元素，直接给时钟图标加CSS样式修改填充色也行。Font Awesome的空心图标（far类）内部默认是透明的，我们可以用fill属性把它改成白色：

<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<style>
  .white-inner-clock .far.fa-clock {
    fill: white;
    /* 要是图标边框颜色被影响，加这两行恢复原边框 */
    stroke: currentColor;
    stroke-width: 1;
  }
</style>
<span class="fa-layers fa-4x white-inner-clock">
  <i class="far fa-calendar-alt"></i>
  <i class="far fa-clock" data-fa-transform="shrink-6 down-6 right-6"></i>
</span>

注意：这个方法在Font Awesome JS加载的SVG模式下有效，要是你用的是Web Font模式，空心图标内部没法直接通过CSS填充，那方案一更适合你。

小提醒 #

• 微调data-fa-transform里的shrink、偏移参数，能让白色背景和时钟完美贴合。
• 如果需要改变时钟边框的颜色，直接修改时钟图标的color属性就行，白色填充不会受影响。

内容的提问来源于stack exchange，提问作者Sebastien D