Search code examples
vue.jsfont-awesome-5

Font Awesome embed code not working in project generated with Vue CLI

I created a default Vue project with the Vue CLI, and got an embed code sent to my email for Font Awesome 5. I added that code to my project index.html in the public folder. 

<head>
  <script src="https://use.fontawesome.com/8e1c33adc2.js"></script>
</head>

I'm using this in a component template:

<i class="fas fa-trash"></i>

It just shows up as a box.

Do I have to do something special to get the embed code to work in my Vue component, like adding it to main.js?

enter image description here

Solution

  • I got it working by logging into Font Awesome and using the free kit code from https://fontawesome.com/kits.

    All I needed was this in the head section of index.html:

    <head>
  <script src="https://kit.fontawesome.com/[kit code].js" crossorigin="anonymous"></script>
</head>