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