Using icons for navigation items

I want to use icons for navigation in a new site.

This is so they can be consistent with an iOS app.

Has anyone done this? and how?

Thanks!

Foundation has an icon bar stack. I haven’t used it personally but I think it serves this purpose.

Can do this very easily with Foundation and Font Awesome. Even in the TopBar menu stack. See here
http://www.zeebedesigns.com/foundation-menu-icons

This is what the names for the pages will look like

@daviddelmonte

You can use this code in the title, and all is ok, I think :wink:

<i class="fa fa-heart-o"> with text</i>

without text

<i class="fa fa-heart-o"></i>

But you must include font awesome code or include with the FA stack.

Thanks Zeebe. I just found a RealMac post on the subject too. Follow on question please:

Can I resize the icons despite being limited by a theme header?

David

Thanks Oscar. Whats the FA code for an image in Resources?

Thanks - I’ll look at that.

If you are using font awesome code, yes you can resize, like this
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

The site I showed you on is using fa-lg

If you look on that site I listed, it has many different looks you can do with TopBar

Perhaps it’s not necessary, because it’s included in the theme.
But I will look on this!

here is a new site with the largest setting for Font Awesome
http://www.zeebedesigns.com/foundation-menu-icons-large

@Zeebe - can I use custom icons? (around 75px)

Possibly, you would need to host the icons on a server and then link to them, let me try it out.

You need this code in the header and the code from the Font Awesome website in the resources.

<link rel="stylesheet" href="%resource(font-awesome/css/font-awesome.min.css)%">

@Oscar… Doesn’t this limit me to FA images. Your earlier example is fine with some themes… (Not Tesla by the way -at least with 100px images.

Yes, you can do that as long as you have a URL to the icon. See this site:
http://www.zeebedesigns.com/image-menus/
I am using this code for it to work:
<img src="http://www.zeebedesigns.com/warehouse/big-ten-images/big-icon-illinois.png"></img>

Perfect. Thanks! This and Oscar’s answer really give me what I need.

Many thanks to you all. This forum is pretty great.

Is this the new main RW forum now? Is there also a section on StackOverflow?