Support » Plugin: Font Awesome Menus » Why not multiple classes (icon-large)?
Why not multiple classes (icon-large)?
-
Your docs say “Unlike the menus which are limited to a single icon declaration” but what if I need a large icon for my menu item? Why can’t I put multiple classes, icon-home icon-large, in the menu class box?
If I do, one of the classes ends up at the parent li element, and the other ends up where both should be, at the i element.
-
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 theli
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 createdi
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:
http://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
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!
- The topic ‘Why not multiple classes (icon-large)?’ is closed to new replies.