一、打开阿里矢量图网站

域名：iconfont.cn

图片[1]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

二、注册登录

图片[2]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

三、搜索图标

这个就不必上图了，就在首页搜索框收录即可。

四、将搜索的图标加入购物车

图片[3]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

五、添加购物车之后—添加至项目

图片[4]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

六、选择Symbol格式

然后点击：暂无代码，点击生成

图片[5]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

七、将申请的代码放入主题

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

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

图片[6]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

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

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

<svg class=\"icon\" aria-hidden=\"true\"><use xlink:href=\"#加入你的图标代码\"></use></svg>网站源码

图片[7]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

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

图片[8]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

最终效果：

图片[9]-WordPress子比主题使用阿里矢量图标美化导航的方法-无双资源网

文章版权声明【站长提示】购买任意会员都可获得本站所有资源免费下载权限！！！
【下载声明】本站只提供资源，不提供技术支持，介意勿下！！！
1、本站提供的资源，都来自网络，版权争议与本站无关。
2、所有内容及软件的文章仅限用于学习和研究目的，不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
3、我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关。
4、您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。
5、如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

THE END