wordpress知更鸟主题添加菜单图标

马谦马谦马谦 2018年5月20日11:50:27
评论
412字阅读1分22秒

知更鸟主题5.2及之前的版本使用的图标库为font awesome,5.2之后的版本使用阿里图标库的图标。相对来说,选择阿里图标库更好一些,它的图标更全且有国内cdn,访问速度更快。

添加后的效果:

wordpress知更鸟主题添加菜单图标

一、设置图标库

如果是用阿里图标库,要设置图标库的路径,并且项目的前缀一定要设置为zm,否则页面元素会错位。关于阿里图标库的使用方法可以参考阿里图标库的使用方法

设置图标库的位置为:

wordpress知更鸟主题添加菜单图标

二、设置图标

2.1 查找图标

在相应的图标库中找到想要的图标,复制图标代码。

Awesome font:

wordpress知更鸟主题添加菜单图标

阿里图标库的图标代码在第二行,把鼠标放到图标上面会有复制代码按钮也可以直接复制:

wordpress知更鸟主题添加菜单图标

2.2 设置图标

在菜单设置页面的右上方显示选项中开启css类

wordpress知更鸟主题添加菜单图标

然后菜单项中就会多出一条css属性,在这里添加上图标代码。假设图标代码是code,则阿里图标库的填入代码为zm zm-code,awesome font的填入代码为fa fa-code

wordpress知更鸟主题添加菜单图标

保存之后即可在菜单栏中显示图标了。

马谦马谦马谦
  • 本文由 发表于 2018年5月20日11:50:27
  • 转载请务必保留本文链接:https://www.dyxmq.cn/cloud/wordpress/wordpress-begin-lts-set-menu-icon.html
使用微信公众号代替wordpress发说说 Wordpress

使用微信公众号代替wordpress发说说

先写个标题,内容下次再写,太晚了得睡觉了,明天一早还要起来跑步~ 说说地址:我的说说首页 效果 在微信公众号发送说说内容 同步到wordpress说说页面:
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: