WordPress子比主题使用阿里矢量图标美化导航的方法

我们看到的大部分Wordpress网站,都是使用的 Font Awesome 这个矢量图标库。

但有个问题, Font Awesome 图标库的图标并不好看,所以今天我们就分享一下让Wordpress如何引入阿里巴巴的矢量图标。

一、打开阿里矢量图网站

域名:iconfont.cn

Wordpress子比主题使用阿里矢量图标美化导航的方法

二、注册登录

Wordpress子比主题使用阿里矢量图标美化导航的方法

三、搜索图标

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

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

Wordpress子比主题使用阿里矢量图标美化导航的方法

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

Wordpress子比主题使用阿里矢量图标美化导航的方法

六、选择Symbol格式

然后点击:暂无代码,点击生成

Wordpress子比主题使用阿里矢量图标美化导航的方法

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

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

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

Wordpress子比主题使用阿里矢量图标美化导航的方法

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

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

<svg class="icon" aria-hidden="true"><use xlink:href="#加入你的图标代码"></use></svg>网站源码
Wordpress子比主题使用阿里矢量图标美化导航的方法

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

Wordpress子比主题使用阿里矢量图标美化导航的方法

最终效果:

Wordpress子比主题使用阿里矢量图标美化导航的方法

注明:本文为星速云原创版权所有,禁止转载,一经发现将追究版权责任!

(0)
上一篇 2022年8月4日 下午12:29
下一篇 2022年8月4日 下午12:29

相关推荐

发表评论

登录后才能评论
问答社区 QQ客服
微信客服
微信客服
分享本页
返回顶部