Why not multiple classes (icon-large)?

I have the exact same problem…

I modified the code to accept more classes, like icon-large. Go to the plugin folder and open: font-awesome-menus.php.

1. Around line 157, replace function fontawesome_menu with this:

function fontawesome_menu( $nav ) {
	$menu = preg_replace_callback(
		'/<li(.*)class="(.*)"(.*)><a[^>]+>(.*)<\/a>/',
		array( $this, 'fontawesome_replace' ),
		$nav
	);
	print $menu;
}

2. Right below, replace function fontawesome_replace with this:

function fontawesome_replace( $a ) {
	$str = $a[0];
	$class_tag = $a[2];
	$classes = explode(' ', $class_tag);
	$icon_classes = array();
	foreach( $classes as $class ) {
		if( preg_match( '/icon-/', $class ) ) {
			array_push( $icon_classes, $class );
		}
	}
	if( !empty( $icon_classes ) ) {
		$listitem = $str;
		$link_text = $a[4];
		$i_class = '';
		foreach( $icon_classes as $icon ) {
			$listitem = str_replace(
				$icon,
				'',
				$listitem
			);
			$i_class .= $icon . ' ';
		}
		$i_class = trim( $i_class );
		$str = str_replace(
			$link_text,
			'<i class="' . $i_class . '"></i><span class="fontawesome-text"> ' . $link_text . '</span>',
			$listitem
		);
	}
	return $str;
}

That didn’t work. Believe it or not, if I naively put a “print $nav;” as the first line in the fontawesome_menu function, I get the right output.

I have icon-camera icon-large in the “CSS Classes” field on the menu admin screen, and it pops out just fine in the li.

Using the new Twenty Thirteen theme.

if I naively put a “print $nav;” as the first line in the fontawesome_menu function, I get the right output.

Cool! What do you mean my code doesn’t work though?
Do you mean that it doesn’t work the way you wanted it to work?

Basically by placing the print $nav; you are not letting the plugin to do its job and create the <i class="..."></i> right before the link text. You are just leaving the classes in the <li> element, which is the default in WordPress.

That’s fine, but I needed the plugin behavior ??

Cool! What do you mean my code doesn’t work though?

Sorry, I meant that when I installed your replacement fontawesome_replace function, I did not get more than one class – only the first class got put into the li.

In order to verify I had made the code change (no caching issues, etc.) I started to put in debug statements.

Do you mean that it doesn’t work the way you wanted it to work?

It appears to REMOVE the two icon font classes from the original $nav.

Basically by placing the print $nav; you are not letting the plugin to do its job and create the <i class=”…”></i> right before the link text. You are just leaving the classes in the

• element, which is the default in WordPress.

Ah… sorry, didn’t get that point. But having the classes in the li element is causing the font icons render properly, and before the actual li text. So not sure what having them properly in an i element would get us.

So not sure what having them properly in an i element would get us

It’s totally fine not having them in the i element.
And since it works for you in the li element you shouldn’t change anything. ??

The i element is useful for those that want the icon to be right next to the text (not visually only, but in the code too).

And the plugin was meant to work like that. That’s why I provided the solution. For others that might come across and want the same functionality with multiple classes.

It appears to REMOVE the two icon font classes from the original $nav.

Now I am confused! Since it removed both classes from the li element, how come you say right above that “…only the first class got put into the li”?

Anyway. The plugin deliberately removes the class from the li element and then adds it to the newly created i element (otherwise we would have duplicate classes). That’s the plugin’s default functionality.

(Remember, adding classes is not provided by the plugin, but by WordPress, and WordPress adds the classes to the li element by default)

Ah, OK. My fault.

Let me correct my statements – I don’t see the plugin (with your new code) adding an i element, and it appears to remove only the second class from the li element.

If I turn off the plugin, both classes stay in the li element.

Here, have a look:
https://new.understandingfaith.edu.au/

I can only leave it open and with that theme for 24 hours (I hope that’s OK).

Again, I have “icon-camera icon-large” in the menu’s CSS Classes box.

I don’t think 24 hours will be a problem! ??

It’s weird, cause on my website (localhost) it shows up correctly and I have the classes: icon-home icon-large

Screenshot

Are you (absolutely) sure you replaced both functions?
I had updated my answer a couple of times at the beginning with changed code. Maybe you were too fast and copied my initial (wrong) code?

By the way, thank you for your feedback…

I had updated my answer a couple of times at the beginning with changed code. Maybe you were too fast and copied my initial (wrong) code?

Arg!!! That was it! I hope that wasn’t my fault since I don’t want to be wasting your time.

The functions as you have them up there now DO WORK. Many thanks for the patch. Long live open source!

Nice! ?? No problem at all…
Take care!