子比主题导航菜单图标设置教程

子比主题的导航菜单自带图标和徽章功能,但藏得比较深,而且有几个坑。本文一次讲清。

一、入口在哪

外观 → 菜单 → 添加或选中菜单 → 展开任意菜单项

展开后会看到这些字段:

• 网址
• 导航标签
• 菜单父级 / 菜单排序
• 导航名称(支持 HTML)
• 图标前缀 ← 点「新增图标」
• 徽章
• 显示限制
• 高级子菜单

二、图标前缀怎么用

点「新增图标」会弹出图标选择器,选好之后会自动往「导航名称」框里插入一段代码,形如:

<i class="fa fa-home"></i>首页

本质上就是往菜单标题里嵌 HTML,子比只是提供了可视化选择器。

三、⚠️ 图标紧贴文字怎么办

这是子比主题的一个已知问题:子比自带的 CSS 没有给导航图标留间距,Font Awesome 本身也没有。

对比一下,其他站点是在子主题里补了一行:

.fa { margin-right: 5px }

你没有子主题的话,可以改用内联样式:

<i class="fa fa-home" style="margin-right:5px"></i>首页

四、图标库版本

子比内置的是 Font Awesome 4.7,不是 5 或 6。写法是 fa fa-xxx,不是 fas fa-xxx。

常用对照:

五、两个注意事项

1. 图标前缀和徽章独立,可以同时设置
2. PC 端菜单项不要加太多,超过一行会自动折叠成「更多」

常见问题

Q:新增图标点了没反应?
A:先确认「导航名称」框里是空的。如果已有内容,图标会插在光标位置,容易看不出来。

Q:保存之后图标消失了?
A:WordPress 后台保存菜单时会重写菜单项标题,理论上不会过滤 HTML(管理员有 unfiltered_html 权限)。如果真被过滤,改用子主题的函数注入。