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.
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.)
Masking components | How it works |
---|---|
Inner Icon (cut out) | Set using typical class attribute. Transform using any data-fa-transform properties. |
Outer Icon | Set using data-fa-mask attribute on the Inner Icon. |
ID used in defs | Set using data-fa-mask-id (Available in 5.12.2 or later) |