这篇是旧站保留下来的 WordPress 菜单小技巧。它的核心价值很简单：不用额外图片，把 Iconfont 的 Symbol 图标放到菜单标题里，让导航栏更直观一点。

现在我把它整理成一版更干净的步骤，只保留通用做法，不再围绕旧主题和转载来源展开。

准备 Iconfont 项目

  1. 打开阿里巴巴矢量图标库，创建一个项目。
  2. 把需要的图标加入项目，生成 Symbol 引用代码。
  3. 复制项目生成的 JS 地址，后面会放进 WordPress 主题里。
网站建设iconfont.cn阿里巴巴矢量图标库图标搜索、项目管理和 SVG/字体图标资源。图标设计素材

在 WordPress 中引入 Symbol 脚本

最简单的方式，是在主题的 functions.php 里挂到 wp_head。正式站点建议先用子主题，避免主题更新时覆盖修改。

function ailab1_iconfont_script() {
  echo "<script src='你的 iconfont symbol js 地址'></script>";
}
add_action('wp_head', 'ailab1_iconfont_script');

再加一点通用样式，让 SVG 图标和文字对齐：

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

把图标放进菜单标题

进入 WordPress 后台的菜单设置，把 Symbol 图标代码放到导航标签前面即可。

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-home"></use>
</svg> 首页

#icon-home 要替换成你自己项目里的图标 ID。不同主题的菜单输入框支持程度不一样，如果主题会过滤 SVG，就需要改用主题提供的图标字段，或者通过模板文件处理。

我现在的建议

这类做法适合轻量美化，但不要把菜单做得太花。导航最重要的是清楚，不是每个栏目都塞一个图标。对本站这种内容站来说，顶部导航保持简洁，比堆满彩色图标更稳。