Fontawesome 5与VuetifyJs 1.0.0

时间:2018-02-14 09:26:44

标签: font-awesome vuetify.js

我想在VuetifyJs中使用Fontawesome 5 Icons。那可能吗?我应该使用哪个npm包为fontawesome?因为没有人为我工作 对于我来说,作为一个没有经验的VuetifyJs开发人员使用它是非常困惑的,因为VuetifyJs的文档中没有任何明确的步骤。

3 个答案:

答案 0 :(得分:9)

来自docs

  

还支持Font Awesome。只需使用带有标签的图标名称即可。   请注意,您仍需要包含Font Awesome图标   你的项目

Release notes

  

我们添加的内容

     

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>