vue中使用font-awesome的方式vue-fontawesome

最近用vue构建项目，想用font-awesome无意间看到了一个项目

git的项目地址

对于对font-awesome还不太熟悉的人来说，我提供个下面的教程

我以用vue init webpack xx 生成的项目为例，

1.第一步

打开main.js

import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import fontawesome from '@fortawesome/fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
//想要使用什么的种类需要自己安装
import solid from '@fortawesome/fontawesome-free-solid'

//装载到fontawesome中
fontawesome.library.add(brands, solid)

2.第二步

在需要引入的 vue模板中添加

import {FontAwesomeIcon, FontAwesomeLayers} from '@fortawesome/vue-fontawesome'

它自身有好几种使用的方式，这边演示三种基本的方式，首先在script表中添加如下的代码

import {FontAwesomeIcon, FontAwesomeLayers} from '@fortawesome/vue-fontawesome'
import faCoffee from '@fortawesome/fontawesome-free-solid/faCoffee'

export default {
  name: '1',
  components: {
    FontAwesomeIcon,
    FontAwesomeLayers,
  },
  computed: {
    icon() {
      return faCoffee
    }
  },

然后再template中添加如下的代码

<font-awesome-icon :icon="icon"/>
 <font-awesome-icon :icon="['fab', 'font-awesome']"/>
  <font-awesome-icon icon="spinner"/>

页面就会出现你想要的东西

这三种方式，

我想解释下第二种，因为fontawesome的种类问题，这种方式就是采用前缀

Note:这是fontawesome的icon的查询网站地址