pancakes

MicrostockGroup Sponsors


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

0 Members and 1 Guest are viewing this topic.

lucato

  • [<o>] Brasil


« on: December 18, 2013, 13:46 »
0
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.
 
« Last Edit: December 18, 2013, 15:40 by lucato »


« Reply #1 on: December 18, 2013, 14:20 »
0
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]
<i class="icon-beer"> </i>Home
search the CSS for available class names

lucato

  • [<o>] Brasil


« Reply #2 on: December 18, 2013, 15:34 »
0
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]
<i class="icon-beer"> </i>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

  • [<o>] Brasil


« Reply #3 on: December 18, 2013, 15:39 »
0
Forget it, I just read it better, it was to add in the menu tittle "(Navigation label)".

Thanks a lot, solved!

lucato

  • [<o>] Brasil


« Reply #4 on: December 18, 2013, 15:49 »
0
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.

« Reply #5 on: December 18, 2013, 15:53 »
0
It's the bootstrap classes that use the font awesome fonts - see  font-awesome.css

lucato

  • [<o>] Brasil


« Reply #6 on: December 18, 2013, 15:59 »
0
Thanks a lot, there was the list! :0)

lucato

  • [<o>] Brasil


« Reply #7 on: December 18, 2013, 16:51 »
0
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]
<i class="icon-gift"></i> home

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

Thanks.

« Reply #8 on: December 18, 2013, 17:33 »
0
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

  • [<o>] Brasil


« Reply #9 on: December 19, 2013, 01:33 »
0
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.

« Reply #10 on: December 19, 2013, 12:41 »
0
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

  • [<o>] Brasil


« Reply #11 on: December 19, 2013, 17:21 »
0
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. 


 

Related Topics

  Subject / Started by Replies Last post
Icon sets

Started by CofkoCof Shutterstock.com

4 Replies
3533 Views
Last post April 05, 2008, 19:48
by ironarrow
0 Replies
1978 Views
Last post October 27, 2009, 20:09
by madelaide
19 Replies
4720 Views
Last post February 10, 2010, 12:12
by gbalex
4 Replies
2807 Views
Last post February 23, 2010, 15:47
by donding
5 Replies
2625 Views
Last post April 05, 2013, 20:05
by cathyslife

Sponsors

Microstock Poll Results