本文最后更新于:
Iconfont-阿里巴巴矢量图标是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。可以使用GitHub帐号登录,数百万的图标免费使用,官方也提供了详细的教程。
第一步:打开阿里巴巴矢量图标库网址

第二步:登入或者注册账号
第三步:登入之后返回首页搜索需要的图标-如下图

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

第五步:添加购物车之后—添加至项目
如果没有项目的自己新建一个项目即可 不懂的可根据下图演示来

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

第七步:把生成的代码引入至主题
如果后加入的一些新图标是需要在阿里图标库重新生成一下代码
<script src="你的链接"></script>
重要:最后把添加到图标导航菜单栏
1、代码中的【加入你的图标代码】就是你在阿里巴巴矢量图库复制的 ico 代码:
<svg class="icon" aria-hidden="true"><use xlink:href="#加入你的图标代码"></use></svg> 菜单名称

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









![[子比主题美化]用户中心新增一个我的投诉页面-蛙言网](https://b66b.cn/wp-content/uploads/2024/05/20240519003812945-20240518163812972426.webp)

![[子比主题美化] – 多功能搜索组件搜索图标显眼包美化-蛙言网](https://b66b.cn/wp-content/uploads/2024/02/20240215204601405-20240215124601266176.webp)




![[子比主题美化教程] - 给文章侧边栏加一个滚动公告-蛙言网](https://b66b.cn/wp-content/uploads/2024/04/20240424214536890-20240424134536619556.gif)





![[子比主题美化]WordPress 美化弹窗插件-蛙言网](https://b66b.cn/wp-content/uploads/2023/12/20231222233417934-WordPress-美化弹窗插件.webp)
![[子比主题美化]自定义html添加一个好看的动态展示区块-蛙言网](https://b66b.cn/wp-content/uploads/2023/12/20231224105447707-1.gif)




![[免受权]Zibll子比主题 抽奖插件+任务系统+签到翻牌奖励-蛙言网](https://b66b.cn/wp-content/uploads/2025/11/20251113001301665-6_副本.webp)



![[子比主题美化]LV等级&VIP会员图标分享-蛙言网](https://vip.helloimg.com/images/2023/11/27/o0cUjh.png)















Felix 3月14日 22:270
好东西,学习一下!iqusc 3月11日 20:130
谢谢你的分享,我在蛙言网学到了很多!iqusc 3月11日 13:380
谢谢你的分享,我在蛙言网学到了很多!2761229739qq 3月11日 05:170
我今天会很忙,忙着夸夸你h5362202 3月9日 21:530
好东西,学习一下!h5362202 3月9日 21:450
好东西,学习一下!Felix 3月7日 01:440
蛙言网的教程很好用,谢谢!456464645d 3月6日 02:060
谢谢你的分享,我在蛙言网学到了很多!