Using icons for navigation items


(David) #1

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!


(Jason Bostick) #2

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


(Robert Ziebol 🖖🏼) #3

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


(Oscar Schmid) #4

@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.


(David) #5

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


(David) #6

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


(David) #7

Thanks - I’ll look at that.


(Robert Ziebol 🖖🏼) #8

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


(Oscar Schmid) #9

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


(Robert Ziebol 🖖🏼) #10

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


(David) #11

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


(Robert Ziebol 🖖🏼) #12

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


(Oscar Schmid) #13

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)%">


(David) #14

@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.


(Robert Ziebol 🖖🏼) #15

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>


(David) #16

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?