New Power Transforms in Font Awesome 5

“With great power comes great responsibility. ”

Late last week, we released Font Awesome 5 Alpha 6 to folks who have purchased Font Awesome Pro (backers and pre-orders get early access). There’s tons of new stuff to check out, like our all-new SVG framework (with a teensy dash of JavaScript we make SVG icons super easy and super powerful) and every single icon is completely re-made from scratch. All the great things from FA4 have been re-written and re-designed. They’re better in every way, and we could not be happier with how things are turning out.

Speaking of just a dash of JavaScript in our SVG framework, we’ve got a great new set of features that are going to super-charge your icons and give you infinite flexibility.

FA5’s New Power Transforms 💪🏻

In FA5, we’re deprecating FA4’s icon stacks in favor of Layers. Basically, you can layer as many icons as you want on top of each other. Combined with our all-new, super-awesome Power Transforms and a bit of know-how, you can create all sorts of amazing new combinations.

FA5’s Power Transforms are used by adding our handy-dandydata-fa-transform attribute to your icons. It allows you to:

• Grow and shrink icon sizes (data-fa-transform="grow-x" and data-fa-transform="shrink-x").
• Nudge your icons up, down, left, and right (data-fa-transform="up-x", data-fa-transform="right-x", data-fa-transform="down-x", and data-fa-transform="left-x").
• Flip and rotate your icons (data-fa-transform="flip-h", data-fa-transform="flip-v", and data-fa-transform="rotate-x").

And you can chain them all together to come up with some pretty interesting results.

We pull this all off with just a teensy dash of performant JavaScript and CSS transforms. This isn’t the primary way you’ll want to control icon size, but is crazy useful when it comes to stacking.

Example: Layering — Size + Position

Layer as many icons as you like and tweak their size and position super easily. These aren’t limited to certain sizes or increments, unlike FA4. Anything you can imagine, you can do. And quickly.

<span class="fa-layers">
  <i class="fa fa-square"></i>
  <i class="fa fa-crosshairs fa-inverse" data-fa-transform="shrink-12 up-4"></i>
</span>
<span class="fa-layers">
  <i class="fa fa-square"></i>
  <i class="fa fa-crosshairs fa-inverse" data-fa-transform="shrink-12 right-4"></i>
</span>
<span class="fa-layers">
  <i class="fa fa-square"></i>
  <i class="fa fa-crosshairs fa-inverse" data-fa-transform="shrink-12 down-4"></i>
</span>
<span class="fa-layers">
  <i class="fa fa-square"></i>
  <i class="fa fa-crosshairs fa-inverse" data-fa-transform="shrink-12 left-4"></i>
</span>

Units on grow-, shrink-, up-, right-, down-, and left- are in 1/16 units of the total icon height, as Font Awesome 5 is designed on an all-new 16px grid. Since whole numbers and even decimals are allowed, you’ll have pixel-level control of icon size and position in any situation.

Check out the CodePen.

Example: Flip & Rotate

Easily flip and rotate your icons however you like without FA4’s limitations of 90° increments.

<i class="fa fa-magic" data-fa-transform="flip-v"></i>
<i class="fa fa-magic" data-fa-transform="flip-h"></i>
<i class="fa fa-magic" data-fa-transform="flip-v flip-h"></i>
<i class="fa fa-magic" data-fa-transform="rotate-45"></i>
<i class="fa fa-magic" data-fa-transform="rotate-90"></i>
<i class="fa fa-magic" data-fa-transform="rotate-180"></i>
<i class="fa fa-magic" data-fa-transform="rotate-270"></i>
<i class="fa fa-magic" data-fa-transform="rotate-300"></i>

Units on rotate are in degrees and can be any positive number (thanks, JavaScript!) Flip can be horizontal, vertical, or both.

Check out the CodePen.

Example: Layering — Custom Social Logos

Let’s say we wanted to make a set of custom social logos for the footer of our website. We can easily layer a fa-circle icon with our social logos. And Power Transforms give us the ability to completely tweak the size and fine-tune the position so we get them juuuuuust right.

In this example, we’ve tweaked just about every social logo individually to make them look just the way we want. Also notice that we’re using a regular ole fa-question-circle placed directly inline next to the rest. Layered next to regular icons just work. Easy peasy.

<span class="fa-layers fa-5x">
  <i class="fa fa-circle"></i>
  <i class="fab fa-facebook-f fa-inverse" data-fa-transform="shrink-3.5 down-1.6 right-1.25"></i>
</span>
<span class="fa-layers fa-5x">
  <i class="fa fa-circle"></i>
  <i class="fab fa-twitter fa-inverse" data-fa-transform="shrink-6 down-.25 right-.25"></i>
</span>
<span class="fa-layers fa-5x">
  <i class="fa fa-circle"></i>
  <i class="fab fa-codepen fa-inverse" data-fa-transform="shrink-5"></i>
</span>
<span class="fa-layers fa-5x">
  <i class="fa fa-circle"></i>
  <i class="fab fa-youtube-play fa-inverse" data-fa-transform="shrink-6.5"></i>
</span>
<i class="fa fa-question-circle fa-5x"></i>

Check out the CodePen.

Wanna try out Power Transforms?

If you want to try out Power Transforms and get an early look at everything we’re doing in Font Awesome 5, you’ll need to pre-order. You’ll also get the super-easy, super-powerful all-new SVG Framework, 1,000+ more icons, and tons more. And for a limited time, all pre-orders also get ALL Kickstarter stretch goals, including more 46 icon packs (to be designed)!

👉🏻 Pre-order Font Awesome Pro.

Release Timeline

We’ve released FA5 Alpha 6 with a whole bunch of goodies. Next up is Alpha 7 this week, then we’ll be cutting the first Beta just a week or two after in early August. Stay tuned!