# Using icons for navigation items

**URL:** <https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410>\
**Category:** RapidWeaver Classic\
**Created:** [February 13, 2016, 3:39pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410 "2016-02-13T15:39:20Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 3:39pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/1 "2016-02-13T15:39:20Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jabostick](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jabostick/32/1760_2.png) [@jabostick](https://forums.realmacsoftware.com/u/jabostick)\
**Post date:** [February 13, 2016, 3:48pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/2 "2016-02-13T15:48:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zeebe](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/zeebe/32/22007_2.png) [@zeebe](https://forums.realmacsoftware.com/u/zeebe)\
**Post date:** [February 13, 2016, 3:54pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/3 "2016-02-13T15:54:17Z")

</div>

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](http://www.zeebedesigns.com/foundation-menu-icons)

This is what the names for the pages will look like  
 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/3/31cf923614005321623c4232ef50ad6c8bb848bf.png)

---

<div class="post-metadata">

**Author:** ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)\
**Post date:** [February 13, 2016, 3:56pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/4 "2016-02-13T15:56:59Z")

</div>

@daviddelmonte

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.

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/c/ce6786f0b9b2d5529ec0d8804eee9c238647a3cd.png)

![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/3/324549f76f98064b0245f5b1c15df0f37fffa030.png)

---

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 3:58pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/5 "2016-02-13T15:58:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 4:02pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/6 "2016-02-13T16:02:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 4:02pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/7 "2016-02-13T16:02:43Z")

</div>

Thanks - I’ll look at that.

---

<div class="post-metadata">

**Author:** ![zeebe](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/zeebe/32/22007_2.png) [@zeebe](https://forums.realmacsoftware.com/u/zeebe)\
**Post date:** [February 13, 2016, 4:06pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/8 "2016-02-13T16:06:53Z")

</div>

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](http://www.zeebedesigns.com/foundation-menu-icons) I listed, it has many different looks you can do with TopBar

---

<div class="post-metadata">

**Author:** ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)\
**Post date:** [February 13, 2016, 4:06pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/9 "2016-02-13T16:06:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zeebe](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/zeebe/32/22007_2.png) [@zeebe](https://forums.realmacsoftware.com/u/zeebe)\
**Post date:** [February 13, 2016, 4:16pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/10 "2016-02-13T16:16:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 4:17pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/11 "2016-02-13T16:17:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zeebe](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/zeebe/32/22007_2.png) [@zeebe](https://forums.realmacsoftware.com/u/zeebe)\
**Post date:** [February 13, 2016, 4:17pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/12 "2016-02-13T16:17:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Oscar](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/oscar/32/80_2.png) [@Oscar](https://forums.realmacsoftware.com/u/Oscar)\
**Post date:** [February 13, 2016, 4:21pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/13 "2016-02-13T16:21:10Z")

</div>

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

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/0/0c420ef72067c64004d2f64ee728dbc48a72dc9e.png)

 ![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/6/61d7ddce64b53f20cd9f519d95fdbec09b313392.png)

---

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 4:43pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/14 "2016-02-13T16:43:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zeebe](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/zeebe/32/22007_2.png) [@zeebe](https://forums.realmacsoftware.com/u/zeebe)\
**Post date:** [February 13, 2016, 4:47pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/15 "2016-02-13T16:47:54Z")

</div>

Yes, you can do that as long as you have a URL to the icon. See this site:  
[http://www.zeebedesigns.com/image-menus/](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>`

---

<div class="post-metadata">

**Author:** ![daviddelmonte](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/daviddelmonte/32/28853_2.png) [@daviddelmonte](https://forums.realmacsoftware.com/u/daviddelmonte)\
**Post date:** [February 13, 2016, 4:52pm UTC](https://forums.realmacsoftware.com/t/using-icons-for-navigation-items/5410/16 "2016-02-13T16:52:04Z")

</div>

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?