How to add image/icon/logo's to the actual Tab on Foundation Tabs


(Leanne Penner) #1

I would like to use the Tab in a similar way as shown on the Foundation Tab website page in which there are icons on the tabs and a coloured background (I would like to insert logo’s for the products which will be placed in each tab).

As I am new to Foundation, I have been using the demo site as a guideline (thanks for that!) but the tabs have coding in it. There does not seem to be any option (that I can see) for placing images/icons/logo’s, changing the background colour or the tab size. I do not know coding so not sure what the coding in there means.

Thanks,
Leanne


(Doug Bennett) #2

When you say tabs are you talking about the top navigation?

if so check out this page and video at the bottom:
https://foundation.joeworkman.net/learn/navigation/


(Leanne Penner) #3

Thanks for the response, I am referring to the “Tabs” in the Dynamic Layout like the first set under “Font Awesome Tabs”:
https://foundation.joeworkman.net/stacks/starter-pack/tabs/


(Doug Bennett) #4

The images you are seeing on the demo are text characters from font awesome:
check out there site:
http://fontawesome.io/icons/

pick an icon and click on it and you will see a snippet like this:

copy the <i thru the /i> and paste into the text.

you can change the size by adding to the class:

http://fontawesome.io/examples/

To my knowlage can’t do regular images or logos for the tabs.


(Robert Ziebol 🖖🏼) #5

OK, so you can put in your own images, but it HAS to use HTML for it to work, so if in one of the tabs you put this code:
<img src="http://icons.iconarchive.com/icons/sensibleworld/starwars/1024/Boba-Fett-icon.png" alt="Boba Fett" style="width:40px;height:40px;">
You should see a black boba feet helmet appear. So you would need to have the images hosted somewhere and set a width and height like above.

The colors of the tabs are set in the Site Styles stack, on that specific page the tabs are using the Primary Style that is set in the Site Style stack

These are the settings you can choose. Below is an image of the Site Styles settings:

As you can see it uses the purple background, but this is where you change the color. You can also choose custom for a style and choose what ever colors you want, as you can see in this screenshot

Hope this helps.


(Leanne Penner) #6

Great, thanks for that!


(Leanne Penner) #7

Thanks Zeebe. I now understand how the colouring works for the tabs and teefers gave me the info for fontawesome.

For now I may skip on the logo/image but will keep this info to do some practice first. I must have misunderstood from the Foundation website that it was able to be done through the Tab Stack options.

Thanks everyone for the help!