之前用过，但是今天需要用的时候又忘记了，就着手写下来，免得以后使用的时候需要重新百度。

1.切图

ps是肯定要装的啦~打开一个psd文件，文件->新建->弹出窗口

在新窗口中，设置想要的尺寸（因为我这里需要扣图标，所以用的是27 * 27像素的宽高），分辨率没改用默认值，画板勾上，其他参数用默认值，如下：需要改的参数用小红框框出来了~ 然后，右侧图层区域会出现一个空的画板，内容为空，页面上就是一个空白的方框 选中图层名（即画板1，双击可修改），鼠标右击工具栏移动工具，切换成画板工具，此时页面上的画板周围会有三个加号，在每个方向都能添加新画板

将该页面拖出来，再到UI设计好的psd页面，把想要的图标直接拖到每个画板里就行啦~~ 调整格式的话，选中图层名和内容，分别水平垂直居中即可，最后就是导出啦~直接放图（文件->导出->导出为）

选择想要的格式，因为阿里库需要的是svg矢量图，所以就保存为svg格式啦~

2.阿里库图标导入与下载

就是这个按钮，点他~ 那种方式都可以，传完了就可以看到所有图标，鼠标悬浮上去可以看到一个购物车，点他，重复这个操作把所有需要用到的图标都加进去，再点此节第一张图那个购物车

点下载代码，是一个压缩包，保存好，一会要放进项目中的~

3.阿里库导出代码与项目集成

下载完成的文件列表长这样=>可以打开demo_index.html看一看介绍

实现步骤如下：

1.把红线框出来的文件拷进项目styles文件夹中（看你习惯啦，路径要写对）

2.引入css文件

import './assets/styles/iconfont.css'

3.引入css文件

注意打开iconfont.css文件查看在该文件中引入的其他css文件，路径写的对不对，没写对的话会报些奇怪的错误~

4.页面引用

<i class="iconfont icon-tufangda"></i>

有三种引入方式，我喜欢用第二种；就是在class中多加一个属性，第二个属性根据上传的图标名称来，可以查看demo_index.html页面