Font Awesome 嵌入代码在使用 Vue CLI 生成的项目中不起作用答案

【问题标题】：Font Awesome embed code not working in project generated with Vue CLIFont Awesome 嵌入代码在使用 Vue CLI 生成的项目中不起作用
【发布时间】：2020-05-04 22:51:23
【问题描述】：

我使用 Vue CLI 创建了一个默认的 Vue 项目，并将一个嵌入代码发送到我的电子邮件中，用于 Font Awesome 5。我将该代码添加到我的项目 index.html 中的公共文件夹中。

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

我在组件模板中使用它：

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

它只是显示为一个框。

我是否必须做一些特别的事情才能让嵌入代码在我的 Vue 组件中工作，比如将它添加到 main.js？

【问题讨论】：

标签： vue.js font-awesome-5

【解决方案1】：

我在使用 vue 时遇到了 font-awesome 的问题。我的问题的解决方案是使用vue-fontawesome components。

例如，我使用 font-awesome 的方式如下

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
      }
    }
}

并使用了组件-

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

我通过登录 Font Awesome 并使用来自https://fontawesome.com/kits 的免费工具包代码使其工作。

我只需要在 index.html 的 head 部分：

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

【讨论】：

【解决方案3】：

你必须添加font-awesome的css文件。你可以打开开发者工具看到没有<i></i>的类

【讨论】：