icomoom图标加载问题

在学习饿了么的VUE项目的时候，使用了icomoom图标，但是在使用的时候出现了2次问题。

一、报错：未找到相关文件

Module not found: Error: Can't resolve './fonts/sell-icon.woff?mmii2g' in 'C:\Users\lynn\Desktop\sell\src\components\header'

于是在将css文件中的文件引用的url改为url-loader

原因：在webpack.base.conf.js的配置中是这样的

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

这样子一来就不会报错了，但是又出现一个问题

二、图标显示为小方框

查看了其他原因说是因为相关的字体文件路径不对，也有一些回答说是像问题一那样子就好了，试了很多都没用，最后还是文件相对路径的问题。


在icon.styl的文件中要引用到font中的相关字体文件，其相对路径应该是这么写就可以了。

三、icomomm的使用

1）进入网址https://icomoon.io/#icons

2）上传图标

3）生成图标字体

4）下载

5）解压

将下载的文件进行解压，将font文件夹(包含图标字体文件)和style.css(图标代码样式)拉到所需的项目中

6）引用使用

引用：(在VUE中将style.css改为icon.styl文件)

@import "../../common/stylus/icon.styl"

使用：添加class名

<i class="icon-keyboard_arrow_right"></i>

使用图标还可以通过HTML代码