Author Topic: [SOLVED] How to add icon to the main menu item? (Read 4926 times)

lucato · « **on:** December 18, 2013, 13:46 »

Hi folks, I wonder how to add an icon to the main menu item.

I saw a thread explaining how to add to a submenu, bot not for the main mane as I have seen around. Here is the submenu thread:
http://www.symbiostock.org/community/viewtopic.php?pid=2926

Also I have tried just to add the Font-Awesome alias into "Tittle attribute" or "CSS class" into the main menu, once the SS has already in the style.css the @import url("css/font-awesome.css"), but they didn't work. Example: fa-legal or fa-question, etc.

Any idea how to set the icon for the main menu? How you guys have achieved that?

Thanks in advance.

Jo Ann Snover · « **Reply #1 on:** December 18, 2013, 14:20 »

You just add something like the following (I just tested this particular one with my home menu) to the menu text in WordPress

Code: [Select]

 Home
search the CSS for available class names

lucato · « **Reply #2 on:** December 18, 2013, 15:34 »

Quote from: Jo Ann Snover on December 18, 2013, 14:20

You just add something like the following (I just tested this particular one with my home menu) to the menu text in WordPress

Code: [Select]
 Home
search the CSS for available class names

Hi Jo Ann, always helpful, thanks. Just one doubt in your tip. Where have you added such code? What .php file or was it within the field "Tittle attribute" or "CSS class"?

lucato · « **Reply #3 on:** December 18, 2013, 15:39 »

Forget it, I just read it better, it was to add in the menu tittle "(Navigation label)".

Thanks a lot, solved!

lucato · « **Reply #4 on:** December 18, 2013, 15:49 »

Jo Ann, one more question. The icon-beer isn't from font-awesome list I think. What I know from font-awesome all starts with fa-something, but fa-something isn't working with your tip. What list is it from (icon-beer)?

Thanks again.

Jo Ann Snover · « **Reply #5 on:** December 18, 2013, 15:53 »

It's the bootstrap classes that use the font awesome fonts - see font-awesome.css

lucato · « **Reply #6 on:** December 18, 2013, 15:59 »

Thanks a lot, there was the list! :0)

lucato · « **Reply #7 on:** December 18, 2013, 16:51 »

Jo Ann, one more.

I have noticed on my menus when I mouse over, it shows the code as the tooltip (ALT=""). If you check your home link and mouse over it you will see the tooltip showing

Code: [Select]

 home

Any idea how to get to put the regular text without showing the code or deactive the tooltip?

Thanks.

Jo Ann Snover · « **Reply #8 on:** December 18, 2013, 17:33 »

You would have to modify code for that. I just tested this out and it appears to work on my site:

Code: [Select]

			// jas begin add strip_tags() to output of alt text (title) for menu items in case code added for icon or the like
			$atts['title']  = ! empty( $item->title ) 	   ? strip_tags($item->title) 	   : '';
			// jas end

The change needs to be made in nav_walker_description.php which is in wp-content/themes/symbiostock/inc/classes

lucato · « **Reply #9 on:** December 19, 2013, 01:33 »

Good morning Jo Ann.

Wow, amazing! I'd love to understand these codes. kkkk. One day I'll get there. Thanks a lot. Worked like a charm.

In the 1st try didn't work because I changed the file and place in the child theme folder, but I don't know why some .php within child theme folder doesn't override the main one (parent). The nav_walker_description.php is one of them that didn't work the changes within the child folder.

JAS, thanks a lot for your kind help.

Have a great day.

Jo Ann Snover · « **Reply #10 on:** December 19, 2013, 12:41 »

There's an article here about the issues of modifying parent theme files that are in subdirectories versus the top level theme directory

http://wordpress.org/support/topic/how-to-include-subdirectories-and-their-files-in-a-child-theme

I have it on my "when I get some time I'd like to look into this" list to see what could be done to get modifications to Symbiostock to work this way, but for the moment I'm working on getting the rest of my portfolio uploaded and making my site look the way I want it to, so I am modifying parent theme files.

Always keep a copy of the unmodified file
Always keep a copy of your modifications as a theme update will wipe them out

lucato · « **Reply #11 on:** December 19, 2013, 17:21 »

Thanks JoAnn,

That was what I suspected that some file used to call other files in the parent folder within the code and doen't get to call the files from child 1st. That's why they don't override.

Maybe the best option is to duplicate the theme or just change the original one and as you said:
- Always keep a copy of the unmodified file;
- Always keep a copy of your modifications as a theme update will wipe them out.

Plus

By having a copy of the modifications after an update you can use WinMerge to compare files/changes and do over what is needed. Hard task, but not from zero. ;0)

Thanks again.

MicrostockGroup Sponsors

Author Topic: [SOLVED] How to add icon to the main menu item? (Read 4926 times)

lucato

Jo Ann Snover

lucato

lucato

lucato

Jo Ann Snover

lucato

lucato

Jo Ann Snover

lucato

Jo Ann Snover

lucato

Related Topics

Sponsors

Microstock Poll Results

Sponsors