Having issues with getting font-awesome to be included in Vue.js

Question

Expected behaviour: stars with font-awesome font being displayed. Current behaviour: error font is being displayed; font-awesome not being loaded.

Hello. I'm having issues with including font-awesome, I believe. I have an atomic class of stars defined like this.

<template>
  <div class="star-rating">
    <span v-for="i in 5" :key="i" :class="[i <= filledStars ? 'star' : (i - 0.5 <= filledStars ? 'star-half-stroke' : 'star-empty')]"></span>
  </div>
</template>

<script>
export default {
  (...)
  mounted() {
    document.fonts.ready.then(() => {
      console.log("Font Awesome is loaded:", window.FontAwesome !== undefined);
    });
  }

}
</script>

<style scoped>

.star-rating .star:before {
  content: "\f005";
}
(...)
</style>

In my package.json, I do have font-awesome included as dependency.

  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "@fortawesome/fontawesome-free": "^5.15.4"
  },

And added in to main.js (...)

import App from './App.vue'
import '@fortawesome/fontawesome-free/css/all.css'

Despite this, I'm getting this in console log, and fonts are not displayed. Font Awesome is loaded: false

I tried to debug this, trying to add

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

to style in my Atom. This was not a solution that worked either; font was still not loading, and my debug message still returned false.

Answer 1

Normally, I download file svg on fontawesome to use. If you want use it in VueJS project, you read this document set-up-with-vue . Remember finish 3 steps.

Then you read add-icon-with-vue to know how to use fontawesome in vue.

I hope this useful for you.