vue合家福实例(4)：vue中使用Font Awesome 5

在网上查vue中使用Font Awesome，很多是陈旧的，Font Awesome 4.7.0版本。如果不使用Font Awesome 5，那么在官网查的图标，在项目中使用不了。Font Awesome 4 和 5还是有挺大差别的。不细说差别，咱们就来说说怎么在vue中使用Font Awesome 5。
网上的文章，还有官方都说到了怎么使用Font Awesome 5，我不想用这种方法。只是看看官方方法，所以我就贴图了。

图片.png

图片.png

为什么我不想用呢？因为它的使用方法是用了vue组件。我用的element-ui。这样我就要判断是用的哪里的图标，用不同的标签。我菜单中的图标显示方法：

<i :class="menu.icon" v-if="menu.icon && !hc"></i><span v-if="!hc" slot="title">{{menu.text}}</span>

这里menu.icon我希望能使用element-ui的icon，也可以使用Font Awesome。就是用i标签。基于这些考虑，没有选择用官方的这种组件的方法。

下面是我的使用方法

安装

我用的是free图标库

npm install @fortawesome/fontawesome-free

使用

在main.js中加入

import '@fortawesome/fontawesome-free/css/all.min.css'

这样就可以用i标签使用Font Awesome图标了。