说明：当我们从UI设计师那里拿到设计稿，会发现有些地方用字体图标是最好处理的，如果用png或者jpg格式的图片的话，处理起来就特别麻烦。这时就需要将这些图片制作成字体图标。
步骤一：我们现在要把这个账户头像的图片取出来，制作成字体图标。
步骤二：选中图片并把它导出，生成svg格式的源文件。如果无法生成这时就要找UI沟通是否能转成svg的文件。
步骤三：下载成功后会得到svg文件。
步骤四：打开阿里的图标库(https://www.iconfont.cn/search)，这里以阿里的为例。
当然也可以用其他网站的例如： https://icomoon.io。
步骤五：点击那个上传的图标。
扫描二维码关注公众号，回复：
13251474 查看本文章
步骤六：将之前下载的svg格式的文件拖入其他。
步骤七：这里我们就可以看到已经上传的图标。 保留颜色并提交
步骤八：这里就可以看到上传的图标了，鼠标移入添加到购物车，当图标都添加完成之后，点开购物车。
步骤九：这里我们要添加到项目里，因为不确定后期是否还要不要添加图标了。
步骤十：点击中间的 font class 生成一个在线的css文件 ，同样也可以生成js文件都一样。
打开这个css文件内容如下： 这就是我们需要的字体图标
步骤十一：在需要的页面引入这个css文件。
<style lang="less" scoped>
@import "//at.alicdn.com/t/font_2644596_cq6buyru1cf.css";
</style>步骤十二：挑选相应图标并获取类名，应用于页面。
<span class="iconfont icon-xxx"></span>这里以iview组件为例：
<Icon class="incon1" custom="iconfont icon-Vectoricon33" slot="prefix" />icon-Vectoricon33 就是这个图标的名字。
slot="prefix" 插槽 找头部插入这个图标。
custom iview中表示自定义图标。
效果：
