Menu icon Foundation
Adding icons to menu items in top-bar?

I am new to Foundation, I have installed it and succesfully started to customize using SAAS and Compass.
I started to figure out how to customize things and managed to change few things about top bar.

I am wondering what should be done to add an image (icon) to each menu item, so you will have text in the bottom and an upper icon part of the menu item.

Any tip/guideline is welcomed.

Thanks in advance!,

topbarmenu icon

I am new to Foundation, I have installed it and succesfully started to customize using SAAS and Compass.
I started to figure out how to customize things and managed to change few things about top bar.

I am wondering what should be done to add an image (icon) to each menu item, so you will have text in the bottom and an upper icon part of the menu item.

Any tip/guideline is welcomed.

Thanks in advance!,

Brandon Arnold over 5 years ago

hmm maybe a sketch of what you're trying to acheive.

Shreekar Chonkar over 5 years ago

I'll go with Brandon here, a sketch would be helpful.
But if you need to use just the icons, you should go with the icon fonts. They're easy to put in the code, and have same properties as the text.

Check out www.icomoon.io (Or use Foundation's native icons)
You can choose all the icons you like, download them, copy paste the fonts folder, add the css to your html and use them with .
and Done !

I hope this helps.

Maria Rodriguez over 5 years ago

Brandon, Shreekar, thanks a lot for your answers,

Here is the idea on what I would like to achieve:
http://spyrestudios.com/wp-content/uploads/nav-icons/10.jpg

The image/icon should be above the text. Using icons is a great idea but it is not always possible.

As a "spin-off" of the original, question, another effect I would like to achive for the future is this one:
http://www.ttinorte.es/
Where the icon text is split in two lines. Although I guess that's just a matter of playing with widths and CSS.

Foundation is great, but the navigation bar becomes a bit boring once you have used it few times (IMHO).

Any help with the image on the nav.bar icons would be welcomed.