字体糟糕的JS 5:填充堆叠图标上的“空部分”

Question

使用字体Awesome的JS 5，我想创建一个简单的叠加图标与时钟和日历。

​

<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="far fa-clock" data-fa-transform="shrink-6 down-6 right-6"></i>
</span>

​

上面的片段或多或少是我所期望的，除了我希望时钟的“内部”以白色填充，不透明，所以我看不到日历。

更明确的是，这是希望得到的结果(一些糟糕的photoshoping.)

​

​

Answer 1

你可以用圆圈图标，把它变成白色，然后把它放在后面。

​

<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" style="color:white" data-fa-transform="shrink-6 down-6 right-6"></i>
<i class="far fa-clock" data-fa-transform="shrink-6 down-6 right-6"></i>
</span>

​