wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

释放双眼,带上耳机,听听看~!

现在很多的 wp 主题模板自带的都是 Font Awesome 图标库,但是这个图标库的样式太丑了,这里就分享一下 WordPress 引用阿里巴巴矢量图标库的彩色图标的方式方法,其实也很简单,只需要添加图标然后放入一个阿里矢量图标 js 文件就可以了。

第一步:打开阿里巴巴矢量图标库网址

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

第二步:登入或者注册账号

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

第三步:登入之后返回首页搜索需要的图标-如下图

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

第四步:搜索框找到自己要的图标并添加至购物车

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

第五步:添加购物车之后—添加至项目

如果没有项目的自己新建一个项目即可 不懂的可根据下图演示来

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

第六步:选择Symbol格式,然后点击:暂无代码,点击生成

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

 

第七步:把生成的代码引入至主题

添加路径子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加刚复制的 js 格式代码

如果后加入的一些图标是需要在阿里图标库重新生成一下代码的

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

重要:最后把添加图标导航菜单栏

<svg class=“icon” aria-hidden=“true”><use xlink:href=“#加入你的图标代码”></use></svg>首页

1、代码中的【加入你的图标代码】就是你在阿里巴巴矢量图库复制的 ico 代码:

2、在WordPress 后台—> 外观 —> 菜单 —> 文字前 添加上面代码:保存即可

wordpress菜单栏添加Iconfont-阿里巴巴矢量图标库

给TA打赏
共{{data.count}}人
人已打赏
站长资源

优酷 v10.2.59 去广告版

2022-10-29 12:24:00

站长资源

Parallels Desktop(Mac平台虚拟机 ) v18.0.3.53079

2022-10-30 7:30:33

免责声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,邮箱momeis6@qq.com 根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源大部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索