# Changing icon colour in Foundations icon bar

**URL:** <https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695>\
**Category:** RapidWeaver Classic\
**Created:** [February 24, 2017, 11:14am UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695 "2017-02-24T11:14:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![grum1](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/grum1/32/2352_2.png) [@grum1](https://forums.realmacsoftware.com/u/grum1)\
**Post date:** [February 24, 2017, 11:14am UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695/1 "2017-02-24T11:14:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jochenabitz](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jochenabitz/32/27126_2.png) [@jochenabitz](https://forums.realmacsoftware.com/u/jochenabitz)\
**Post date:** [February 24, 2017, 11:26am UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695/2 "2017-02-24T11:26:09Z")

</div>

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

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

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

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

```

Cheers, Jochen

---

<div class="post-metadata">

**Author:** ![grum1](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/grum1/32/2352_2.png) [@grum1](https://forums.realmacsoftware.com/u/grum1)\
**Post date:** [February 24, 2017, 11:51am UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695/3 "2017-02-24T11:51:37Z")

</div>

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) [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](mailto:graham@dernalandscapes.me.uk)

Derna  
4 Rose Hill  
Wembury  
Plymouth PL9 0BZ

---

<div class="post-metadata">

**Author:** ![jochenabitz](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jochenabitz/32/27126_2.png) [@jochenabitz](https://forums.realmacsoftware.com/u/jochenabitz)\
**Post date:** [February 24, 2017, 11:58am UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695/4 "2017-02-24T11:58:21Z")

</div>

Hi Graham,

I am on my way, but please try this:

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

```

Jochen

---

<div class="post-metadata">

**Author:** ![grum1](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/grum1/32/2352_2.png) [@grum1](https://forums.realmacsoftware.com/u/grum1)\
**Post date:** [February 24, 2017, 12:15pm UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695/5 "2017-02-24T12:15:39Z")

</div>

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](mailto:graham@dernalandscapes.me.uk)

Derna  
4 Rose Hill  
Wembury  
Plymouth PL9 0BZ

---

<div class="post-metadata">

**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\
**Post date:** [February 24, 2017, 12:20pm UTC](https://forums.realmacsoftware.com/t/changing-icon-colour-in-foundations-icon-bar/12695/6 "2017-02-24T12:20:19Z")

</div>

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.
