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?


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

This is what the names for the pages will look like


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?


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

@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:
I am using this code for it to work:
<img src=""></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?