第一步:打开阿里巴巴矢量图标库网址 https://www.iconfont.cn/
第二步:登入或者注册账号
第三步:登入之后返回首页搜索需要的图标-如下图
![图片[1]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/3-39-1024x630.jpg)
第四步:搜索框找到自己要的图标并添加至购物车
![图片[2]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/3-40-1024x561.jpg)
第五步:添加购物车之后—添加至项目
如果没有项目的自己新建一个项目即可 不懂的可根据下图演示来
![图片[3]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/1-1024x593.gif)
第六步:选择Symbol格式,然后点击:暂无代码,点击生成
![图片[4]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/1-1-1024x533.gif)
第七步:把生成的代码引入至主题
添加路径:子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加刚复制的 js 格式代码
![图片[5]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/3-41.jpg)
重要:最后把添加图标导航菜单栏
<svg class="icon" aria-hidden="true"><use xlink:href="#加入你的图标代码"></use></svg>网站源码
1、代码中的【加入你的图标代码】就是你在阿里巴巴矢量图库复制的 ico 代码:
![图片[6]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/3-42.jpg)
2、在WordPress 后台—> 外观 —> 菜单 —> 文字前 添加上面代码:保存即可
![图片[7]- WordPress利用阿里巴巴矢量图标美化导航栏菜单](https://www.dh139.cn/wp-content/uploads/2025/04/3-43.jpg)
感谢您的来访,获取更多精彩文章请收藏本站。

暂无评论内容