用阿里巴巴矢量图标库彩色图标子比主题引

  发布时间:2025-11-04 05:12:10   作者:玩站小弟   我要评论
现在大部分博客图标都采用Font Awesome图标库,比主巴矢标库因为Font Awesome图标库满足了大部分用户的题引图标需求了,但做为喜欢花里胡哨的巴量图我们是不够的,Font Awesome图标库的彩色图标不仅没有彩色的图标,个性化的比主巴矢标库图标还有点少!所以对于我们喜欢彩色的题引图标菜单图标选择性很少!所以只能引入其他的巴量图矢量图标库,今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色彩色图标。美化教程阿里巴巴矢量图标库网址: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:本网站名称:蜡笔傻新2:本站永久网址:https://labishaxin.com/3:本站部分内容收集于互联网,如果有侵权内容、请联系我们删除,不妥之处,敬请谅解4:本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责5:本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报6:本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

现在大部分博客图标都采用Font Awesome图标库,比主巴矢标库因为Font Awesome图标库满足了大部分用户的题引图标需求了,但做为喜欢花里胡哨的巴量图我们是不够的 ,Font Awesome图标库的彩色图标不仅没有彩色的图标 ,个性化的比主巴矢标库图标还有点少 !所以对于我们喜欢彩色的题引图标菜单图标选择性很少!所以只能引入其他的巴量图矢量图标库,今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色彩色图标。

美化教程

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

食用方法

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

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

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

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

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

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

第六步:引入JS代码

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

第七步 :添加css样式

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

第八步:添加彩色图标

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

文章分类

二、彩色上面的比主巴矢标库 iconziyuan 对应图标代码 //就是图库下面的图标名称

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

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

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

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

文章分类

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

内容看完了 © 版权声明 1:本网站名称 :蜡笔傻新

2:本站永久网址:https://labishaxin.com/

3:本站部分内容收集于互联网,如果有侵权内容、请联系我们删除 ,不妥之处 ,敬请谅解

4:本站一切资源不代表本站立场 ,并不代表本站赞同其观点和对其真实性负责

5:本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

6:本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新

  • Tag:

相关文章

最新评论