网站引用阿里巴巴iconfont彩色图标

食用教程

一、新建Iconfont项目

点击前往 阿里巴巴矢量图标库，官网如图所示，首先进行账号注册：

登录之后你就可以寻找自己需要的图标啦，将自己的需要的图标通通点进购物车！

再把购物车的图标加入到项目，如果还未创建项目，那就再新建一个新的项目。

二、导出Symbol 接入链接

站长这里推荐使用 Symbol 的方式集成到网站中，当然你也按照官方的教程使用其它方式集成，将刚刚新建的项目生成 Symbol 接入链接，复制生成的代码。

三、用JavaScript引入网站

将下面链接替换为刚刚复制的链接，然后将代码粘贴到 Zibll主题设置-自定义代码-自定义javascript代码 中保存。

<script src="刚刚复制的链接"></script>

现在，网站集成 Iconfont图标 就已经全部搞定了！接下来就是使用 Iconfont图标 了！

四、使用 Iconfont图标

在已经添加到你项目中查找图标并复制图标名称代码

然后按照下面的格式替换href="#icon-xxx"中的图标代码，将代码插入到你需要显示图标的地方！

最后，只要将代码插入到你需要显示图标的地方，就会出现图标了，效果如本站导航栏所示。

五、如果你想让图标旋转起来（非必需）

如果你想让图标旋转起来，你可以这么做：

然后你就会发现，图标转起来了，O(∩_∩)O哈哈哈~

查看更多