在Vue项目中使用iconfont图标

1.登录iconfont网站，选择我们需要的图标加入购物车，添加到项目，进行下载。
2.下载好的压缩包解压缩，里面有很多文件，
demo.css .html 文件等都不要了
新建一个文件夹iconfont放在asset/style文件夹下，
把iconfont.eot iconfont.js iconfont.svg iconfont.ttf iconfont.woff 放入新建的iconfont文件夹中。
把iconfont.css文件放入style文件夹目录下。
3.在main.js中引入

import 'styles/iconfont.css'

注意路径，我这里的路径是在webpack.base.config.js的resolve中对路径进行简写设置。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles')
    }
  }

4.在iconfont.css中修改文件的路径，如果是我上面写的文件夹层次的话，需要在iconfont的前面加上./iconfont/.
5.在模板中使用，格式如下：

<span class="iconfont down_arrow_icon">&#xe6ae;</span>

参考：https://blog.youkuaiyun.com/qq_34802010/article/details/81451278 感谢原作者整理分享。