Menu
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.
595
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.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
