# 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
Using `data-fa-glow="black"`
Resources

- Font Awesome 5
- Bootstrap 3

Links

- Grab the CSS on GitHub
- A project by the City of Sault Ste. Marie