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