WordPress菜单描述插入HTML代码不显示Font Awesome图标求助

我太懂这种头疼的情况了——明明加了Font Awesome的HTML标签，结果菜单里显示的是一堆代码而非图标！给你几个亲测有效的解决步骤，按顺序试下来应该能搞定：

• 解除WordPress的HTML转义限制
  默认状态下，WordPress会自动剥离菜单描述里的HTML标签，所以第一步要先关掉这个机制。打开你当前主题的functions.php文件，添加这段代码：

  remove_filter('nav_menu_description', 'strip_tags');
  

  这段代码的作用是移除WordPress自带的标签过滤函数，让你插入的HTML能正常被解析。

• 检查主题菜单模板的输出逻辑
  有些主题的菜单模板会主动转义菜单描述的内容，比如用了esc_html()这类函数。你需要找到主题里负责渲染菜单的文件（通常在header.php或者主题的inc文件夹里的menu.php之类的文件），找到输出菜单描述的那行代码，把esc_html($item->description)改成$item->description——这样就不会把HTML转成纯文本了。

• 确认Font Awesome资源已正确加载
  有时候图标不显示不是菜单的问题，是Font Awesome根本没加载成功。你可以打开页面的源代码，搜索“font-awesome”看看有没有对应的CSS链接。如果没有的话，在主题的functions.php里加这段代码来加载最新的Font Awesome：

  add_action('wp_enqueue_scripts', 'load_font_awesome');
  function load_font_awesome() {
      wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
  }
  

  要是你用的是本地安装的Font Awesome，把链接换成你本地文件的路径就行。

• 清缓存！清缓存！清缓存！
  改完代码后一定要清掉WordPress的缓存插件（如果用了的话），还有浏览器的缓存——很多时候修改不生效都是旧缓存在搞鬼。

• 终极替代方案：用CSS伪元素加图标
  如果上面的方法都不管用，那就换个思路，不用HTML标签，改用CSS伪元素来加图标：

  1. 先在WordPress后台的菜单编辑页面，打开顶部的“屏幕选项”，勾选“CSS类”，这样每个菜单项就会显示CSS类的输入框了。给目标菜单项加个自定义类，比如menu-cloud-icon。
  2. 然后在主题的style.css里添加这段CSS：

     .menu-cloud-icon::before {
         content: "\f0c2"; /* 这是fa-cloud对应的Unicode编码，从Font Awesome官网能查到每个图标的编码 */
         font-family: 'Font Awesome 6 Free';
         font-weight: 900; /* 免费版的Font Awesome图标一般需要这个权重值 */
         margin-right: 8px; /* 图标和文字之间的间距，按需调整 */
     }
     

这样操作下来，菜单里的Font Awesome图标应该就能正常显示啦！

内容的提问来源于stack exchange，提问作者Maan