在vue项目中引入font-awesome和iconfont字体图标库

因为在项目中需要用到字体图标库，然后自己引入font-awesome和iconfont都出现了大大小小的问题，打算总结一下。本人是个小菜鸟，如果写的不好，还请见谅。

一、在vue项目中引入font-awesome
1、使用npm下载

先下载font-awesome
> npm install font-awesome --save
再在main.js中引入css
import 'font-awesome/css/font-awesome.min.css'

注意这里在打包时需要更改webpack.prod.conf.js的配置，才能打包成功

 new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css'),
  allChunks: true,
}),
改成
new ExtractTextPlugin({
  filename: utils.assetsPath('../[name].[contenthash].css'),
  allChunks: true,
}),

2.直接引入

在官网上下载文件到本地，解压后把文件夹放到static中，然后在index.html中引入相对地址就OK了

 使用方法：<i class="fa fa-home"> 主页</i>

二、在vue项目中引入iconfont
1、直接引入

先在官网选择好自己想要的图标，点击下载代码或者添加项目中的下载到本地
或者直接下载为图片。