WordPress菜单用FontAwesome作导航标签显示带两行两位数的方块

Hey there! I totally get how frustrating it is when you follow a tutorial and things don't work as expected—especially when you're new to WordPress. Let's walk through the steps to get those Facebook (and other brand) icons showing up correctly in your menu.

First, Confirm the Basics #

You mentioned the Better Font Awesome plugin works on pages, so we know the plugin itself is loading Font Awesome properly. The issue is almost certainly that WordPress is escaping the HTML in your menu's navigation label by default, or there's a small configuration tweak needed.

Step 1: Stop WordPress from Escaping HTML in Menu Labels #

By default, WordPress sanitizes menu item titles to prevent unwanted code, which means your <i class="fab fa-facebook"></i> tag is being turned into plain text (or broken code that shows squares). To fix this, we need to disable that sanitization for menu titles:

Option A: Use a Code Snippet Plugin (Easiest for Beginners)

1. Install and activate the Code Snippets plugin from your WordPress dashboard (Plugins > Add New).
2. Go to Snippets > Add New and paste this code:

   // Allow HTML in WordPress menu item titles
   remove_filter( 'nav_menu_item_title', 'wptexturize' );
   remove_filter( 'nav_menu_item_title', 'convert_chars' );
   

3. Name the snippet something like "Allow HTML in Menu Titles", click Save Changes and Activate.

Option B: Edit Your Theme's functions.php (Advanced)

If you're comfortable editing theme files (and using a child theme to avoid losing changes when your theme updates):

1. Go to Appearance > Theme File Editor.
2. Select your theme's functions.php file from the sidebar.
3. Paste the same code from above at the very end of the file, then click Update File.

Step 2: Fix Your Menu Item's Navigation Label #

Now that WordPress allows HTML in menu titles, make sure you're using the correct unescaped HTML in your menu item:

1. Go to Appearance > Menus.
2. Find your custom menu item with the icon.
3. In the Navigation Label field, replace the escaped code (<i class="fab fa-facebook"></i>) with the actual HTML tag:

   <i class="fab fa-facebook"></i> Facebook
   

   (Add the text "Facebook" if you want it next to the icon, or leave it just the tag for icon-only.)
4. Click Save Menu and refresh your website to check if the icon shows up.

Step 3: Clear Caches (Just in Case) #

Sometimes old cached files can prevent new changes from showing up:

• Clear your browser's cache (press Ctrl+Shift+R or Cmd+Shift+R to hard refresh).
• If you're using a WordPress caching plugin (like WP Rocket, W3 Total Cache), clear the cache from the plugin's settings.

Bonus: Check for Font Awesome Conflicts #

If the above steps don't work, it's possible your theme is loading its own version of Font Awesome, which might conflict with the Better Font Awesome plugin:

1. Right-click your website and select View Page Source.
2. Search for "font-awesome" to see if there are multiple CSS files loaded (e.g., one from your theme, one from the plugin).
3. If you find duplicates, you can disable the theme's Font Awesome load—most themes have a setting for this in their customization panel, or you can use a snippet to deregister the theme's version.

That should get those icons looking right in your menu!

内容的提问来源于stack exchange，提问作者Lau Falke Gammeljord Petersen