This appears to be a bug in the Font Awesome 4 Menus plugin. Here’s some technical info that may help the plugin developers to fix this:
The plugin filters menus with wp_nav_menu
to add the FontAwesome elements, but it does not consider that other plugins and themes can alter that menu HTML first via the wp_nav_menu_args
filter. The Genesis framework uses this filter on line 907 of genesis/lib/structure/header.php:
add_filter( 'wp_nav_menu_args', 'genesis_header_menu_args' );
In Genesis 2.2.0, a link_before
and link_after
attribute was introduced in the genesis_header_menu_args
filter function to wrap menu links in a span, like this (simplified version):
$args['link_before'] = '<span itemprop="name">';
$args['link_after'] = '</span>';
The Font Awesome 4 Menus plugin uses the following regex to find menu items it wants to alter, and passes any matches to its replace()
function, which swaps out standard menu links for the custom Font Awesome content:
'/(<li[^>]+class=")([^"]+)("?[^>]+>[^>]+>)([^<]+)<\/a>/'
As links in Genesis 2.2.0 now contain an additional <span>
tag, the plugin’s regex no longer finds a match, the replace()
function never fires, and no extra FontAwesome HTML is added, which is why the icons no longer appear.
You can see that the regex is broken from the following screenshots:
– Without span wrapper tag [1 match]: https://d.pr/i/Hh2B
– With span wrapper tag [0 matches]: https://d.pr/i/16igS
Based on this, I would recommend altering the plugin’s regex to take into account other plugins and themes that may alter menu markup with wp_nav_menu_args
. Doing this should fix the issue with Genesis and any other themes and plugins that could result in a conflict. (The bug is not necessarily unique to Genesis, as any theme or plugin can introduce extra markup in a menu link.)
If the plugin developer needs any help with this, feel free to ask. I could not find a public GitHub repo to submit an issue or patch.