我想在VuetifyJs中使用Fontawesome 5 Icons。那可能吗?我应该使用哪个npm包为fontawesome?因为没有人为我工作 对于我来说,作为一个没有经验的VuetifyJs开发人员使用它是非常困惑的,因为VuetifyJs的文档中没有任何明确的步骤。
答案 0 :(得分:9)
来自docs:
还支持Font Awesome。只需使用带有标签的图标名称即可。 请注意,您仍需要包含Font Awesome图标 你的项目。
我们添加的内容
v-icon现在支持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>
答案 1 :(得分: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>
答案 2 :(得分:1)
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>