About using FontAwesome’s CDN in a Vue app

Photo by Harpal Singh on Unsplash

Hey everybody! I’m very excited about posting this cause it’s my first post on Medium.

I don’t wanna bore you with a presentation of myself, so let’s dive in.

As you surely noticed, in this article we’re going to talk about using FontAwesome’s CDN on a Vue.js application.

TL;DR: dont use the JS version of FontAwesome’s CDN in your Vue.js app.
For example, if you need to display an icon based on a Vue.js variable, it won’t work as expected.

When “message.sended” changes to “true” it won’t render “fa-check”.

I’m building a real-time chat in Vue so I decided to add an icon to send some feedback to user about messages status.

Right after the user sends a message, I wanted to display a clock (like WhatsApp) until the API saves it. Something like this:

And then, when the API has saved the message, change it to a check (again, like WhatsApp).

Here I noticed that something wasn’t working as I expected, cause the icon doesn’t change.

At first I thought it had broken somehow Vue’s reactivity but after reviewing the code and analyzing the behavior (using devtools) I realized that the property was being updated correctly.

After this, I took a long coffee break to think about it and then an idea came directly to my mind: what if the problem isn’t Vue?

I came to my computer and switched from FontAwesome’s JS version to CSS version.

I literally did this.

And voilà! It worked.
I don’t know if this an “expected behavior” (very weird) but it really blowed up my mind.

Want to live this horrible experience?
- Fiddle with FontAwesome JS version (scary one)
- Fiddle with FontAwesome CSS version (friendly one)

And thats all for now! Thanks for reading!
P.D: I’m not a native english speaker so post’s content could have some errors so I apologize :)