今天给大家介绍一下阿里图标库引用彩色图标的方法。

首先解释一下彩色图标是什么？又或者我们可以把彩色图标用在什么地方：

正如我们的网站所示：首页顶部菜单，文章分类菜单的彩色图标就是引用的字体图标。当然我是将字体图标下载下来引用然后修改css控制变色的，不算真正的彩色字体图标。下面我就来介绍一下彩色图标的运用：

使用步骤

1.登录阿里图标：https://www.iconfont.cn，如果没有账号先注册，创建一个项目，项目名称随意，比如下图所示：

2.创建好项目以后，搜索自己需要的图标，添加入库（图标上的购物车），或者上传自己的图标入库。

3.添加完成后需要添加到项目，可以选择右上角的购物车图标，点击添加至项目。

4.找到我的项目，可以看到我们添加的图标

5.引入项目下面生成的 symbol 代码添加到7b2主题-常规设置-头部HTML标签中（每次添加更新图标时都要重新点击更新代码并替换）

<script src="你的阿里图库js代码"></script>

6.加入通用 CSS 代码到7b2的子主题style.css中

/*阿里巴巴图标*/svg.icon{
width:1em;
height:1em;
margin-bottom:-2px;
}

7.挑选相应图标并获取类名，添加到后台-外观-菜单中

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>

8.#icon-xxx为你添加的项目图标名（#后边的代码）

9.大功告成请查看，记得清理一下缓存，有CDN的刷新一下