使用 vuetify 在 vue 中添加 FontAwesome 4

Question

我正在使用 vuetify，我需要添加 font awesome 库，但我不知道该怎么做，看起来 vuetify 文档没有更新，添加 font awesome 的指南说我应该在 main.js 中添加下一个：

Vue.use(Vuetify, {
 iconfont: 'fa4'
})

或类似的东西，我的问题是我正在为运行应用程序使用另一种方法，我的 main.ts 是下一个：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
require('@/SCSS/main.scss')

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

如果我将“Iconfont”添加到我的 New Vue({})，它不起作用。

在这种情况下，如何将超棒的字体添加到 vuetify？

Answer 1

你需要使用vue-fontawesome。首先安装fontawesome vue-fontawesome、核心和图标：

$ npm i @fortawesome/vue-fontawesome
$ npm i @fortawesome/fontawesome-svg-core
$ npm i @fortawesome/free-solid-svg-icons

然后在src/main.js

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

现在完成了，您将能够使用下一个标签的图标：

<font-awesome-icon icon="user-secret" />

您所要做的就是替换图标属性中的值： icon="Replace this text"

编辑 1：您在 codesandbox 中有一个工作示例：

编辑 2：我将添加一个屏幕截图，因为 CodeSanbox 有时需要很长时间才能加载，这只是为了证明如果您等待，您实际上可以看到图标。

使用 vuetify 在 vue 中添加 FontAwesome 4

Add FontAwesome 4 in vue using vuetify

font-awesome

vue.js

vuetify.js