vue-cli3 使用font awesome icon

在vue-cli3项目中需要使用font-awesome-icon，因此做一些记录。

---

下载

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

注意中间的包，表示下载solid类型的font。其他类型还有regular，brand，如果要使用，则需要下载

$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons

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/>'
})

上例表示，导入faUserSecret这一个font。注意要在library中add。用什么导入什么。例如，要用weixin的font，则

import {faWeixin} from '@fortawesome/free-brands-svg-icons'
library.add(faWeixin)

在page文件中使用

 <a href="#">
   <font-awesome-icon :icon="['fab', 'weixin']"></font-awesome-icon>
 </a>

从哪里查阅font

fontawesome

1. 在搜索框中输入要查阅的font
   
2. 进入weixin，找到url和style
   

可以见到，style为brand，即为我们下载的包。而class为fa-weixin，在main.js中import时需要用camel格式faWeixin，而在pages中使用时，classname直接为weixin即可。

---

参考：
fontawesome
example