Title: Why not multiple classes (icon-large)? Last modified: August 21, 2016 --- # Why not multiple classes (icon-large)? * Resolved [gbell12](https://wordpress.org/support/users/gbell12/) * (@gbell12) * [12 years, 10 months ago](https://wordpress.org/support/topic/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. Viewing 10 replies - 1 through 10 (of 10 total) * [mspyratos](https://wordpress.org/support/users/mspyratos/) * (@mspyratos) * [12 years, 10 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946879) * I have the exact same problem… * [mspyratos](https://wordpress.org/support/users/mspyratos/) * (@mspyratos) * [12 years, 10 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946880) * 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( '/]+>(.*)<\/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, ' ' . $link_text . '', $listitem ); } return $str; } ``` * Thread Starter [gbell12](https://wordpress.org/support/users/gbell12/) * (@gbell12) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946881) * 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. * [mspyratos](https://wordpress.org/support/users/mspyratos/) * (@mspyratos) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946882) * > 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 `` right before the link text. You are just leaving the classes in the `
  • ` element, which is the default in WordPress. * That’s fine, but I needed the plugin behavior 🙂 * Thread Starter [gbell12](https://wordpress.org/support/users/gbell12/) * (@gbell12) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946883) * > 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 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. * [mspyratos](https://wordpress.org/support/users/mspyratos/) * (@mspyratos) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946884) * > 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) * Thread Starter [gbell12](https://wordpress.org/support/users/gbell12/) * (@gbell12) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946885) * 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/](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. * [mspyratos](https://wordpress.org/support/users/mspyratos/) * (@mspyratos) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946886) * 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](http://mspyratos.com/icon-classes.jpg) * 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… * Thread Starter [gbell12](https://wordpress.org/support/users/gbell12/) * (@gbell12) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946887) * > 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! * [mspyratos](https://wordpress.org/support/users/mspyratos/) * (@mspyratos) * [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946888) * Nice! 🙂 No problem at all… Take care! Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Why not multiple classes (icon-large)?’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/font-awesome-menus_9e2f33.svg) * [Font Awesome Menus](https://wordpress.org/plugins/font-awesome-menus/) * [Frequently Asked Questions](https://wordpress.org/plugins/font-awesome-menus/#faq) * [Support Threads](https://wordpress.org/support/plugin/font-awesome-menus/) * [Active Topics](https://wordpress.org/support/plugin/font-awesome-menus/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/font-awesome-menus/unresolved/) * [Reviews](https://wordpress.org/support/plugin/font-awesome-menus/reviews/) * 10 replies * 2 participants * Last reply from: [mspyratos](https://wordpress.org/support/users/mspyratos/) * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/multiple-classes-icon-large/#post-3946888) * Status: resolved