Masking

Combine two icons create one single-color shape, thanks to the power of SVG+JS! Use it with Power Transforms for some really awesome effects.

Masks are great when you do want your background color to show through. For clarity in the example, we've added a background color on the icon so you can see the effect.

Masks

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

To accomplish the masking some SVG definitions are generated. You can control the ID's used by specifying data-fa-mask-id. (Available in 5.12.2 or later.)

Masks

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