WordPress.org

Ready to get started?Download WordPress

Forums

Font Awesome Menus
[resolved] Why not multiple classes (icon-large)? (11 posts)

  1. gbell12
    Member
    Posted 1 year ago #

    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.

  2. mspyratos
    Member
    Posted 11 months ago #

    I have the exact same problem...

  3. mspyratos
    Member
    Posted 11 months ago #

    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;
    }
  4. gbell12
    Member
    Posted 11 months ago #

    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.

  5. mspyratos
    Member
    Posted 11 months ago #

    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 :)

  6. gbell12
    Member
    Posted 11 months ago #

    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

  7. element, which is the default in WordPress.
  8. 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.

  9. mspyratos
    Member
    Posted 11 months ago #

    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)

  10. gbell12
    Member
    Posted 11 months ago #

    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.

  11. mspyratos
    Member
    Posted 11 months ago #

    I don't think 24 hours will be a problem! :P

    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...

  12. gbell12
    Member
    Posted 11 months ago #

    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!

  13. mspyratos
    Member
    Posted 11 months ago #

    Nice! :) No problem at all...
    Take care!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags