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!
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
You can use this code in the title, and all is ok, I think
<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?