Changing icon colour in Foundations icon bar


(Graham Smith) #1

How can i change the icon colour when using the icon bar in foundation please, i have tried typing in css code supplied by W3 site but to no avail


(Jochen Abitz) #2

Hi Graham,
the color of the Icon Bar icons is defined as Primary colour in the Site Styles stack.

If you want to change it via css, please use this code:

.icon-bar i{
	color:red !important;
}

Cheers, Jochen


(Graham Smith) #3

Many thanks Jochen Abitz

I have carried out those suggestions but to no avail my web site is http://dernalandscapes.me.uk http://dernalandscapes.me.uk/ and the envelope icons I am trying to change to white are on the reviews page.
Warm regards

Graham
graham@dernalandscapes.me.uk

Derna
4 Rose Hill
Wembury
Plymouth PL9 0BZ


(Jochen Abitz) #4

Hi Graham,

I am on my way, but please try this:

.block-item i{
	color:red !important;
}

Jochen


(Graham Smith) #5

Hi Jochenabitz,
Many thanks you are a genius, That is spot on, How would i change the close envelopes to open when clicked

Many
Warm regards

Graham
graham@dernalandscapes.me.uk

Derna
4 Rose Hill
Wembury
Plymouth PL9 0BZ


(Gary) #6

If you set the Icon Bar Style to Custom, you can set the colours there. Icon Bar doesn’t do animations and will only change the colours. To use an animation you can use the S4S Hoverbox and use an image for the closed envelope and a “hovered” image for the open envelope. The hover transition will make it look animated.