9

I upgraded to Font Awesome 5 (FA 5) from version 4.7. The reason was the layered icons. In FA 4.7, fa-stack classes were used. In FA 5, fa-layers are much powerful.

The problem, as far as I see, fa-layers are only implemented in pure js version of Font Awesome. (using fontawesome-all.js). If you want to use css version, you do not see fa-layers class anywhere in folder structure (in the current version of 5.0.8). Is it possible to use fa-layers with css version of FA 5?

By css version I mean this:

<head>
  <!--core first + styles last-->
  <link href="/static/fontawesome/fontawesome-all.css" rel="stylesheet">
</head>

Bt Js version, I mean this:

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>

Since fontawesome-all.js replaced all i tags to svg, css manipulation is difficult with this version. So, if css version has all the features that Js version has, I would like to us css version of FA 5.

Atilla Baspinar
  • 925
  • 1
  • 12
  • 17

2 Answers2

6

No, Webfonts with CSS does not have all of the features that SVG with JS has. The How to Use SVG with JS page shows some of the features that are new or exclusive to SVG with JS. Layers, specifically, are new to SVG with JS:

Layers are the new way to place icons and text visually on top of each other, replacing our classic icons stacks.

You can still use stacks in Webfonts with CSS to do some interesting things: codepen example

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fal fa-circle fa-2x fa-stack-1x fa-inverse"></i>
  <i class="far fa-triangle fa-stack-1x fa-inverse"></i>
</span>

But stacks are definitely not as powerful as Layers with Power Transforms, which are only available in SVG with JS.

mwilkerson
  • 1,374
  • 10
  • 12
4

I prefer using the Web Fonts version as well, mostly for performance reasons. I also wanted to use the more advanced layered icons with the fa-layers class.

I recreated some of the fa-layers functionality in CSS and put the stylesheet up on GitHub. It's not perfect or complete. I'm still working on it, but it might help you get some of the missing functionality without switching away from Web Fonts and CSS.

dangowans
  • 2,263
  • 3
  • 25
  • 40