Fontawesome 5 与 VuetifyJs 1.0.0

Question

我想在 VuetifyJs 中使用 Fontawesome 5 Icons。那可能吗？我应该为 fontawesome 使用哪个 npm 包？因为没有人为我工作。作为一个没有经验的 VuetifyJs 开发者，我真的很困惑，因为 VuetifyJs 的文档中没有任何明确的步骤。

Answer 1

来自docs：

Font Awesome is also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project.

Release notes:

Things we added

v-icon now supports FontAwesome 5

你可能只需要将它包含在你的 index.html 里面 <head> 左右

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

然后像<v-icon>fa-search</v-icon>

一样使用

Answer 2

为了传达我的 Vue 具体答案，为了让 Font Awesome 5 与 Vuetify.js 一起工作，我需要在 main.js 中进行以下设置：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCode } from '@fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCode)

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

然后我在模板层面使用导入的图标：

<v-btn fab dark small color="black" v-on:click="addCodeBlock">
   <font-awesome-icon :icon="['fas', 'code']"/> // <-- This replaces <v-icon>fa-code</v-icon> 
</v-btn>

Answer 3

安装

yarn add --dev @fortawesome/fontawesome-free
// or
npm i --save-dev @fortawesome/fontawesome-free

导入

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import '@fortawesome/fontawesome-free/css/all.css'

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

使用

<v-icon>fas fa-lock</v-icon>

Fontawesome 5 与 VuetifyJs 1.0.0

Fontawesome 5 with VuetifyJs 1.0.0

font-awesome

vuetify.js

安装

导入

使用