[atblue]

I am wanting to replace the main nav text links with icons. Is there an easy (hah) way to do this? For example, on the link below, I’d like “@mattsechrest” nav link to be the Twitter bird icon and so forth.

http://waterfallmobile.com/blogs/msechrest/

Thanks.

[ahmetsali]

Hi, try this;

1-) Remove the text in that menu item “@mattsechrest”

2-) paste this custom css code to Theme Options > Style > Custom CSS box;

#menu-item-622 a:before {
    font-family: FontAwesome; 
    font-weight: normal; 
    font-size: 24px;  
    text-align:left; font-style: normal; 
    display: inline-block; text-decoration: inherit;
    content: "\f099";
    margin: -12px 0;
}

[atblue]

Hi, ahmetsali. Thanks for the idea.

Just did as you suggested, but nothing shows up?

[ahmetsali]

it looks like you have completely removed that menu item, dont remove it, just leave it’s text blank.

[atblue]

I did, my bad. But that was just me deleting the text in the Navigation Label field .. I re-created and placed a nonbreaking space ” ” in there and now its blank, but no icon?

[ahmetsali]

since you deleted and added that menu item, its id has changed, edit the code;

#menu-item-622 to #menu-item-664

[atblue]

Good catch, I should have known that. But she’s still not showing up with an icon? Does it have to be a specified width/height in that CSS?

[ahmetsali]

ok one more thing before it is done,

remove the code

text-indent: -999em;

i added it accidently and edited and removed that piece of code from my post.

[atblue]

Hah. Masterful. Thank you. I shall repeat (with specific menu item #s) for the others.

Super appreciate the quick help on this new years eve (in san francisco).

[ahmetsali]

you are welcome, we are in 2014 in turkey :)

[atblue]

One last question on this .. what about using an icon that I upload? Meaning using an image, not a font-awesome symbol? I tried using a background image but nothing is showing up. A last tip there?

This did not work:

#menu-item-620 a:before {
display: inline-block;
margin: -12px 0;
background: url(‘logo_sechrest_blog.png’) no-repeat top left;
width:20px;
height:20px;
}

[Mehmet S.]

Hi, try this:

#menu-item-620 a
{
display: inline-block;
width: 20px;
height: 20px;
background-image: url( "http://themes.pixelwars.org/read-wp/wp-content/uploads/2013/01/gallery-03.jpg" ) no-repeat top left;
}

Note: Upload your image to your media library.

[atblue]

No luck, Mehmet. I added that and nothing shows up?

#menu-item-620 a {
display: inline-block;
width: 20px;
height: 20px;
background-image: url(“http://www.waterfallmobile.com/blogs/msechrest/wp-content/themes/read-child/logo_sechrest_blog.png”) no-repeat top left;
}

[atblue]

Also, the unicode symbols are not showing in FF for the font awesome parts of this..

[Mehmet S.]

Edit:

#menu-item-620 a
{
display: inline-block;
width: 20px;
height: 20px;
background-image: url( "http://www.waterfallmobile.com/blogs/msechrest/wp-content/themes/read-child/logo_sechrest_blog.png" );
background-repeat: no-repeat;
background-position: top left;
}

[atblue]

That worked!

Thanks mehmet. It essentially says the same thing, but different .. not sure why that worked but it did.

And finally, any thoughts on the FF rendering issue with the font awesome symbols?

[ahmetsali]

i can see the fontawesome icons on the latest ff v26.

[atblue]

You can? Hmm. I can’t. Running Mavericks and FF v26. Is there a way to display these icons without using the unicode symbol in the CSS?

[atblue]

Well, in the interest of time, I’ve just gone with image hacks like the W logo in there for the rss feed and twitter icon. Totally works. The other solution is more elegant but I can’t for the life of me figure out why FF is not showing it!

Thanks for all your help though!

[Mehmet S.]

You are welcome.