HTML之Unicode引用方式添加矢量图标（如阿里巴巴矢量图库）

目录

一、阿里巴巴矢量图库下载

1.进入官网选择图库

2.下载项目中图标至本地

 二、Unicode引用

1.特点

         2.引用（此处使用阿里巴巴矢量图库）

---

一、阿里巴巴矢量图库下载

 

1.进入官网选择图库

阿里巴巴矢量图标库里有大量图库，简洁优美，挑选你需要的图标

（1）新建一个项目

（2） 选择需要的图标，加入购物车

 （3）将购物车图标加入至项目中

2.下载项目中图标至本地

（1）文件名带demo的都是都是一些实例，里面也是讲使用方法。针对unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件

（2）将其加入至我们的项目文件中

（3）修改iconfont.css引用其他文件路径 

 二、Unicode引用

1.特点

unicode是字体在网页端最原始的应用方式，特点是：

（1）兼容性最好，支持ie6+，及所有现代浏览器。

（2）支持按字体的方式去动态调整图标大小，颜色等等。

（3）但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

2.引用（此处使用阿里巴巴矢量图库）

    <i class="iconfont">&#xeb9d;</i>