Font Awesome的JS 5:填充"空白部分"在堆积的图标

时间:2018-04-11 08:09:37

标签: css font-awesome font-awesome-5

使用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>
&#13;
&#13;
&#13;

以上片段或多或少是我所期望的,除了我想要&#34;内部&#34;时钟要填充白色不透明,所以我不会看到日历。

更明确地说,这是希望的结果(一些糟糕的照片......)

enter image description here

1 个答案:

答案 0 :(得分:3)

您可以使用圆圈图标,将其设置为白色并将其放在后面。

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