How to use Font Awesome 5 on VueJS Project

Font Awesome is a popular icon library that I used a lot in my Vue.js related project. Since it’s updated from Font Awesome 4 to Font Awesome 5, I have confronted with couple of problems when integrated with VueJS project. I would like to share the ways I’ve been used to add Font Awesome to my VueJS project.

In this article, I only deal with the free version of Font Awesome. For the Pro version, the process is pretty much similar.

The easiest way

The simplest way is using CDN. You can enter your email into Font Awesome website and then get CDN link

Add the script to head section of index.html

<script src="https://kit.fontawesome.com/your-code-number.js"></script>

then you can use font awesome in your template with normal syntax:

<i class="fab fa-medium"></i>
<i class="far…