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

Question

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

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

我在组件模板中使用它：

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

它只是显示为一个框。

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

Answer 1

你要添加字体的css文件-awesome.you可以打开开发者工具看到没有class和<i></i>

Answer 2

我在使用 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" />

希望这对您有所帮助。

Answer 3

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

我所需要的只是 index.html 的头部部分：

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

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

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

vue.js

font-awesome-5