layui图标拓展-自定义图标

在前端开发过程中我们经常会遇到框架提供的图标不够用的情况，那就需要我们自己进行拓展了，自己弄过几次，但每次配置都会忽略一些小细节，写个备忘文章

配置流程：

1.下载矢量图标

2.导入图标文件

3.修改css

4.使用

一、下载矢量图标

https://www.iconfont.cn/

进入阿里矢量库

选择自己喜欢的图标库或者直接搜索自己的喜欢的图标（比如我想要购物车的图标，在里面直接搜索相关关键词就可以）

选择自己喜欢的图标，然后直接添加到购物车，可以添加多个，一起打包

选择下载代码 之后自动开始压缩包下载

二、导入图标文件

将下载好的压缩包解压，然后将文件夹里面的所有文件全部剪切到自己的框架的字体文件夹下（这里我们为了既能够用layui自带的图标，又可以用我们下载的图标，所以我们 不进行替换 ，而是单独创建字体文件夹）

三、修改CSS

打开layui.css 搜索 @font-face 这里我们为了便于修改和查看 排下版

上面是未修改的 我们需要复制这二块 然后修改部分代码

四、使用

打开字体文件中的 demo_index.html

用谷歌浏览器打开 IE不兼容

在项目中使用代码 注意不要带 ；符号

&#xe63d

现在刷新就可以看到图标了 如果无法正常使用可以留言或者email给我