阿里矢量图标的三种使用方式整理

web端iconfont使用

引用方式：

    1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色）

    2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的）

    3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）

兼容性 unicode > font-class > symbol

方式一、unicode 引用(下载到本地)
①添加想要的图标到库，右上角购物车将图标加入到想要加入的项目中（或者新建的项目中）

②下载项目中图标至本地，解压下载的压缩包，将下载文件放入到static文件夹中（带demo字样的是详细配置说明文件，不用引入）

③引用图标css文件

运行会报错文件查找失败：'./iconfont.ttf?t=1642736921417'
是因为在iconfont.css里面要使用绝对路径，不能使用相对路径（举例修改如下图，需要根据自己文件所放位置修改为对应格式路径）

④在需要图标的地方使用图标，类名为iconfont，图标名称也可以通过复制直接拿到


运行结果如图:
1. 方式二、unicode 引用(在线链接)
  ①复制在线链接
②定义使用iconfont的样式并全局引用


③在需要图标的地方使用图标，类名为iconfont，图标名称也可以通过复制直接拿到

运行结果如图：
1. 方式三、font-class 引用
  ①拷贝项目下面生成的font-class代码
②引用图标css文件

③使用图标，挑选相应图标并获取类名，应用于页面
1. 方式四、symbol 引用
  uniapp不支持symbol多色图标，需要使用工具iconfont-tools进行处理
①以symbol方式下载到本地

②安装iconfont-tools（windows+R，cmd打开dos窗口，安装iconfont-tools）

执行命令为：npm install -g iconfont-tools

③将下载压缩包解压，取出iconfont.js文件，将iconfont.js文件放入iconfont-tools文件夹下（iconfont-tools在node安装路径下\node_global\node_modules\内，我是将nodejs安装在F盘下）

④命令提示符执行命令：iconfont-tools，一直回车使用默认设置就好，执行完毕后iconfont-tools文件夹下会生成iconfont-weapp文件夹。