[Vuejs]-Font Awesome embed code not working in project generated with Vue CLI

by

0👍

✅

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>
👤nCardot

0👍

I have had issues with font-awesome with vue. The solution for my problem was to use vue-fontawesome components.

For example, I used font-awesome the following way

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
import { faAngleUp } from '@fortawesome/free-solid-svg-icons'

export default {
  name: 'Timer',
  props: {
    msg: String
  },
  components:{
    FontAwesomeIcon
  },
  data: function(){
    return {
      selected_interval: null,
      intervalID: null,
      buttonText: "Start",
      isStart: true,
      isStop: false,
      toggleAngle: faAngleDown,
  },
  methods: {
    dropdown_toggle: function(event) {
      event.stopPropagation()
      let dropdown = document.querySelector('#pomodoro-dropdown');
      dropdown.classList.toggle("is-active")
      if(this.toggleAngle == faAngleDown){
        this.toggleAngle = faAngleUp
      }
      else{
        this.toggleAngle = faAngleDown
      }
    }
}

and used the componenent-

<font-awesome-icon :icon="toggleAngle" />

hope this helps.

👤paul-shuvo

-1👍

you have to add the css file of font-awesome.you can open developer tools and see there is no class with the <i></i>

👤Angella Yu

Leave a comment