fa5-power-transforms-css Test Page

Font Awesome 5 introduces a feature called Power Transforms, which opens developers up to limitless customizations of their icons. The problem is, these features are only available to users of the SVG + JS version. What about the Web Fonts users?

This project attempts to recreate the key features of Font Awesome 5 Power Transforms using straight CSS, while keeping the same syntax as Font Awesome 5. Just drop in a little extra CSS and enjoy!

Rotating and Flipping

Compare with the Font Awesome SVG + JS Examples

Difference: Font Awesome 5 Power Transforms rotations do not rotate the background. In the CSS solution, the background is rotated as well, as seen in the 30 degree rotations.


  <!-- HTML same as Font Awesome 5 -->
  <div class="fa-4x">
    <i class="fas fa-magic" data-fa-transform="rotate-90"  style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate-180" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate-270" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate-30"  style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="rotate--30" style="background:MistyRose"></i>

    <i class="fas fa-magic" data-fa-transform="flip-v" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="flip-h" style="background:MistyRose"></i>
    <i class="fas fa-magic" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
  </div>

Layering, Text, & Counters

Compare with the Font Awesome SVG + JS Examples

Difference: Font Awesome 5 Power Transforms support decimals in the shrink, up, down, left, and right Power Transforms. In the CSS solution, the decimal portions are ignored.

27 NEW


  <!-- HTML same as Font Awesome 5 -->
  <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>
  </div>

Layering with `data-fa-glow`

Unique to this CSS solution, a special data-fa-glow attribute has been added to outline icons. The outline colour defaults to white, but also takes into account some Bootstrap 3 background classes on parent elements. You can also set the value to black, danger, warning, success, or info to set the glow colour. You may need to edit the colour options depending on your template.

Warning: The paint-order CSS property is not supported by Chrome which can cause display issues for `glow` icons. Doubling up the icon declaration, with a glow version on the bottom can solve the problem.


  <!-- data-fa-glow is unique to fa5-power-transforms-css -->
  <p class="alert alert-info text-center">
    <span class="fa-layers fa-fw fa-4x">
      <i class="fas fa-file-alt"></i>
      <i class="fas fa-info-circle" data-fa-transform="shrink-10 right-6 down-5" data-fa-glow></i>
      <i class="fas fa-info-circle" data-fa-transform="shrink-10 right-6 down-5"></i>  <!-- Chrome workaround -->
    </span>
  </p>

Masking

Difference: Recreating masking using the exact Font Awesome 5 syntax in CSS would be huge. Every icon class would have to be considered. It's not feasable. Instead, similar functionality is provided with the .fa-layers class. If the data-fa-mask attribute is present (regardless of what the attribute value is), the icon will be coloured the same colour as the background.


  <!-- Note that an .fa-layers class wrapper is needed -->
  <span class="fa-layers fa-5x fa-fw bg-info">
    <i class="fas fa-square"></i>
    <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square"></i>
  </span>

More Examples

Hover Effects

StackOverflow post

Coloured circles for background colours in layers