如何引用阿里巴巴矢量图标库彩色图标以及图标旋转

阿里巴巴矢量图标库网址：https://www.iconfont.cn/

食用方法

第一步：阿里巴巴矢量图标库官网 —> Github或者新浪微博登录

第二步：然后自己通过搜索框找到自己喜爱的图标并添加至购物车 —> 添加至项目 //没有项目的自己新建项目

第三步：跳转到我的项目 页面（没有跳转的点击–>资源管理–>我的项目）//我的项目自己创建名字

第四步：在 我的项目 页面有一下按钮—>一般选 Symbol

第五步：点击 –> 查看在线链接（没有的的话可以点击生成链接） —>点此复制代码（代码例如下面）

//at.alicdn.com/t/font_2101442_j448m0ggtp.js

第六步：引入JS代码

在当前主题设置—>自定义JS代码 添加下面代码:(下面src=”这里是上面的JS代码，自行替换”)

<script src="//at.alicdn.com/t/font_2101442_j448m0ggtp.js"></script>

第七步：添加css样式

在当前主题设置 –> 自定义CSS代码 或者目录下的 header.php 文件中适当位置添加以下代码:（不适用的，自行调整宽度）

<style type="text/css">
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

第八步：添加彩色图标

一、在WordPress后台—> 外观 —> 菜单 —> 导航标签 添加以下代码:

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

二、上面的 iconziyuan 对应图标代码 //就是图库下面的图标名称

配合一行代码让你网站菜单图标旋转起来

在自己网站主题的CSS中加入以下代码：

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

在WordPress后台，将“fa-spin”添加到菜单中要旋转的图标代码的“class”中。

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

注：本站采用的是“子比”主题，主题自带CSS代码了，如果你Wordpress也是采用“子比”主题那么只需添加 JS代码 和 导航标签 即可！！！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

© 版权声明

懒人资源网

"想做一件任何人都可以做的事情"

打赏作者

订阅

使用手机扫码阅读这篇文章

本文是原创文章，采用CC BY-NC-SA 4.0协议，完整转载请注明来自懒人资源网