阿里巴巴矢量图标库网址: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代码 和 导航标签 即可!!!
感谢您的来访,获取更多精彩文章请收藏本站。
![](/static/img/shoucang.gif)
暂无评论内容