I learn an attention-grabbing put up wherein the writer said the the explanation why they have been formally executed with FontAwesome. I used to be intrigued, given I exploit FontAwesome in all my tasks and really feel that I’m acquainted sufficient with its varied implementations.
To my shock, the explanations supplied all revolved round one core problem—improper manufacturing implementation. It appeared slightly unfair to negatively evaluation FontAwesome as a complete primarily based on improper or impractical implementations. That may be like giving detrimental critiques to a toaster producer as a result of a number of folks arrange their toasters of their loos (and have been met with unlucky accidents). It’s not a failing of the producer…
FontAwesome could be carried out in some ways corresponding to utilizing Kits, downloading and internet hosting the SVG information, and my private favorite: importing the FontAwesome npm packages into your undertaking and utilizing the Library for selective icon importing.
Builders ought to hardly ever be internet hosting and linking the whole suite of FontAwesome CSS information in a manufacturing software or website (except they’re completely satisfied to just accept the pitfalls that associate with it, or if it is necessitated by the undertaking’s necessities). However to be clear: this isn’t the optimum nor the really helpful implementation strategy, and as such, it shouldn’t be used because the yard follow measure the practicality and usefulness of FontAwesome as a complete.
Let’s handle the factors within the unique put up…
🙅♂️ Fable #1: Managing variations is nightmare
The premise:
[You’re] constructing an internet site in 2018, you could have used FontAwesome 5. […] As an example you want a gameboy icon. […] However it does not work. This is all of the the explanation why.
Right here we go…
REASON 1: You are on FontAwesome 5.0. And that is on FontAwesome 5.11.0.
If carried out as undertaking dependencies utilizing npm, a fast replace to your FontAwesome packages will offer you all the most recent icons.
Alternatively, if you happen to’ve carried out a Equipment, all the newest icons will likely be out there to you, primarily based in your chosen model. You simply can verify and replace the model of your Equipment by logging into your FontAwesome account.
REASON 2: It is a ‘professional’ font. You are utilizing a free model.
When looking for icons to make use of on the FontAwesome web site, simply click on on the “Free” filter so that you solely listing the icons out there to your undertaking.
REASON 3: You’ve got been importing strong variations of fonts. It’s best to You want the sunshine variations.
So then set up the light-style npm bundle and import the icons you want.
Higher but, if you happen to’ve carried out FontAwesome as a Equipment, then you definitely routinely have entry to each single icon model.
🙅♂️ Fable #2 – You import 1000’s of unused icons
The premise:
What number of icons are you actually utilizing in your website? Perhaps 6 or 7? Most websites (and I am talking from my very own background) solely use a handful of icons. […] Should you’re importing a fontAwesome’s common.css, you are bringing in tons of of fonticons you do not want. It is much more nightmare-ish if you happen to’re getting a circle-question icon (which lives in common.css) AND a Fb icon (which lives in manufacturers.css). Now there’s 1000’s of fonts imported… all consuming bandwidth.
Once more, if arrange optimally, solely the only a few imported icons you might be really utilizing (and their supporting CSS types) are added to your last transpiled construct information.
Studying additional:
Defenders could say, “Properly you’ll be able to tree-shake it” or “optimize it”.
And also you’re proper! So… what number of devs even know to do this or have the gumption to set that up?
Some frequent floor! Whereas I used to be glad to listen to that the writer agreed that the defenders are proper, I used to be stunned by the belief that implementing FontAwesome optimally is a few Herculean job past the power and understanding of most devs.
Lastly:
TailwindCSS consists of the whole kitchen sink as properly. However additionally they embrace helpers to prune all of it so that you ship absolutely the, smallest most performant css you’ll be able to.
The comparability to TailwindCSS is moot, provided that FontAwesome gives the identical optimisation choices out of the field, supplied your chosen implementation technique helps it. For instance, utilizing npm packages and importing choose icons ensures solely the related icon knowledge and CSS is included in your transpiled construct.
And utilizing Kits means none of this knowledge is included in your last construct and the precise CSS and SVG knowledge is distributed to the person in the course of the client-side render of the web page.
🙅♂️ Fable #3 – Resizing the icons is a nightmare
The premise:
A serious drawback with font icons is that you just’re treating them like fonts first, not icons. You need a horse icon to be 100px extensive. This would possibly not work:
.fa-horse { width: 100px; /* does nothing */ }.As a substitute, it’s a must to fiddle with this utilizing font-size.
That additionally means these icons are additionally affected by different css textual content modifiers, like line-height.
FontAwesome makes use of the font-size property as a result of the icons are sized relative to the content material and UI parts surrounding them. If you place a contextual icon subsequent to your button label, it’s nice that the icon will routinely match its measurement with that of the button label textual content. Want the icon to be slightly larger? Simply add the fa-lg class.
A fast skim over the documentation will let you know every part you must find out about sizing your icons.
🙅♂️ Fable #4 – Main model releases break compatibility throughout the board
The premise:
<!-- FontAwesome 3 -->
<i class="icon-star"></i>
<!-- FontAwesome 4 -->
<i class="fa fa-star" aria-hidden="true"></i>
<!-- FontAwesome 5 -->
<i class="fas fa-star"></i>
<!-- FontAwesome 6 -->
<i class="fa-solid fa-star"></i>
If I needed to improve FontAwesome 3 to FontAwesome 6, I am going to need to go discover all of the markup and repair that.
If somebody is utilizing FontAwesome 3, positive, they must try this.
Nevertheless, from FontAwesome 4 and up, backward compatibility is inbuilt. You possibly can improve your v4 or v5 undertaking to v6 with out having to make any adjustments to your markup.
Should you try the “Backward Compatibility” part of the “What’s Modified” part of the documentation, you’ll discover that assist for the usage of the previous model syntax (and even previous icon names and Unicode values) comes out of the field.
🙅♂️ Fable #5 – It’s important to improve your plan to get the most recent icons
The premise:
If I’ve FontAwesome 5 Professional, which I bought in 2019, and I needed a [thin-style bagel icon], I am going to need to both:
Choice 1: Preserve FontAwesome 5 Professional and in addition embrace FontAwesome 6 [thin-style icons]
Choice 2: Purchase FontAwesome 6 Professional.Simply to get a [bagel icon], I now can both fracture my variations or pay $99.
The reply is simple: simply use the icon! A professional plan with FontAwesome consists of the usage of any icon within the newest model, all the time. So when v7 inevitably will get launched, you’ll get entry to these icons too, no plan-upgrade or further funds required.
In Abstract
All of those issues do have workarounds. The factor is — all these issues are strictly from utilizing FontAwesome!
That is virtually true. I might go additional to say that “all these issues are strictly from implementing FontAwesome in an unoptimised method”.
When carried out properly, FontAwesome gives you with lean, accessible, scalable icons on your tasks. The unique put up conflated the problems current in bloated and “fast” implementations with the service as a complete, which I really feel misinforms folks of its nice many utilities when used appropriately.
In my eyes, FontAwesome remains to be superior.
☝️ Keep in mind: At all times import simply the icons you want, tree-shake your tasks, and by no means make toast within the bathtub.
💬 What do you suppose? Have you ever labored on a undertaking that carried out FontAwesome in a not-so-awesome means? What’s your favorite technique for including icons to your tasks? I am eager to listen to your views and ideas within the feedback beneath!
This put up was initially a remark that I needed to develop right into a extra long-form response. You possibly can view the unique put up and my remark right here:
Submit: https://dev.to/rockykev/im-officially-done-with-fontawesome-2h2f
