WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库

创建矢量库

一、登录阿里巴巴矢量图标库,创建一个图标项目;【PS:FontClass/Symbol 前缀和Font Family必须为zm或者be,目前知道的就这两个,其余自测】

WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库
WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库

二、通过搜索自己需要的图标,加入到购物车;

WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库

三、把购物车里的图标添加到项目;

WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库

四、更新下代码,复制代码到后台——外观——主题选项——辅助功能——阿里图标库粘贴保存;

WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库
WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库

五、在后台外观——菜单——导航菜单复制图标代码粘贴保存;【PS:菜单没有CSS类(可选)在右上角顶部显示选项勾选CSS类】.

WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库

获取JS代码

此次需要使用到Symbol,复制JS代码:

[tip type=”tip success” ]//at.alicdn.com/t/font_1126685_0dc7l0zgxsvr.js [/tip]

引入JS代码

一、在当前主题目录funtions.php添加代码:

[tip type=”tip success” ]function add_stylesheet_to_head() { echo “n<script type=’text/javascript’ src=’//at.alicdn.com/t/font_1126685_0dc7l0zgxsvr.js’></script>”; } [/tip]

二、以上JS链接自行替换

添加css样式

在当前主题目录下的header.php文件中/head前添加以下样式:

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

添加彩色图标

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

[tip type=”tip info” ]<svg class=”icon” aria-hidden=”true”><use xlink:href=”#icon-Home”></use></svg>网站首页 [/tip]

二、其中class=”icon”对应FontClass/Symbol 前缀icon-Home对应图标代码

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

寻宝楼博客免责声明:
1.本文部分内容来源于网络,但并不代表本站赞同其观点和对其真实性负责;
2.若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用;
3.如果本站有侵犯、不妥之处的资源,请在网站最下方联系我们E-mail:xunbaolou@qq.com。将会第一时间处理;
4.本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途;
5.本站提供的所有资源仅供参考学习使用,版权归原著所有,禁止下载本站资源参与商业和非法行为,请在24小时之内自行删除!

寻宝楼博客 补丁教程 WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库 https://bbs.xunbl.com/66.html

上一篇:

已经没有上一篇了!

常见问题
  • 如果资源链接失效,请Email到xunbaolou@qq.com,我们会在第一时间进行处理,感谢~
查看详情

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

WordPress引入阿里巴巴矢量图标库彩色图标及创建阿里矢量库-海报

分享本文封面