遮罩
结合两个图标，借助 SVG+JS 的强大功能，创建一个单色形状！与强大的变换一起使用，可以实现一些非常棒的效果。
当您**希望背景颜色显示出来**时，遮罩非常有用。为了使示例清晰，我们在图标上添加了背景颜色，以便您看到效果。
<div class="fa-4x"> <i class="fa-solid fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fa-solid fa-comment" style="background:MistyRose"></i> <i class="fa-brands fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fa-solid fa-circle" style="background:MistyRose"></i> <i class="fa-solid fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fa-solid fa-square" style="background:MistyRose"></i> <i class="fa-solid fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fa-solid fa-circle" style="background:MistyRose"></i></div>为了实现遮罩，会生成一些 SVG 定义。您可以通过指定 data-fa-mask-id 来控制使用的 ID。（在 5.12.2 或更高版本中可用。）
<div class="fa-4x"> <i class="fa-solid fa-pen-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fa-solid fa-comment" data-fa-mask-id="comment" style="background:MistyRose"></i></div>| 遮罩组件 | 工作原理 |
|---|---|
| 内部图标（剪切） | 使用典型的 class 属性设置。使用任何 data-fa-transform 属性进行转换。 |
| 外部图标 | 使用内部图标的 data-fa-mask 属性设置。 |
| 在 defs 中使用的 ID | 使用 data-fa-mask-id 设置（在 5.12.2 或更高版本中可用） |