You're viewing docs for v5.15.4, an older version of Font Awesome.

Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.

Advertisement

Before You Get Started

Make sure you're:

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.

  <div class="fa-4x">
    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-circle" style="color:Tomato"></i>
      <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-bookmark"></i>
      <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
      <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
      <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
      <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-calendar"></i>
      <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-certificate"></i>
      <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
    </span>

    <span class="fa-layers fa-fw" style="background:MistyRose">
      <i class="fas fa-envelope"></i>
      <span class="fa-layers-counter" style="background:Tomato">1,419</span>
    </span>
  </div>
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)
Advertisement