Font Awesome 的 JS 5：在堆叠图标上填充 "empty parts"

Question

我想使用 Font 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>

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

更明确地说，这是想要的结果（一些糟糕的 Photoshoping...）

Answer 1

你可以使用 circle-icon，把它变成白色然后放在后面。

<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>

Font Awesome 的 JS 5：在堆叠图标上填充 "empty parts"

Font Awesome's JS 5: fill "empty parts" on stacked icons

css

font-awesome

font-awesome-5