Icon Color

[internetplus787]

HI. I am looking to change the Icon Colour for icons within a 4 column layout. I have one 4 column layout, and I would like the icons red. I then have another 4 column layout, where I would like the icons green. The page is the home page at http://www.thewaterwellproject.org (see ‘Challenge’ and ‘Our Solution’ area). Could you please advise how I can do this, by adding code to the short code or adding something in the style sheet.

[Cosmin – SUPPORT]

Hi,

Add this custom CSS in the general theme options:

.sf-icon {
    color: #FF0000 !important;
}

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[internetplus787]

That worked very well thank you.

I am now able to change one row of icons to RED.

As per my question, I would like to change the row of icons below to GREEN (ie. so I am use one row of red and one row of green).

Could you please advise how I can have two icon colours on one page.

Thank you.

[Cosmin – SUPPORT]

You would need to add an extra class in the page builder for each row of icons. Say you add icon-color-1 and icon-color-2 as your extra classes.

Then, replace my code with something like this:

/* red icons */
.icon-color-1 .sf-icon {
    color: #FF0000 !important;
}

/* green icons*/
.icon-color-2 .sf-icon {
    color: #090 !important;
}

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[James R]

Hi Cosmin,

I have tried to use your guidance above to set different icon colours within three (1/3) text blocks, utilising the icon field.

I can change all colours, then I could change the colour of the icon and the text in the text block, but I was unable to change just the icons to three separate colours. Are you able to elaborate a little on the custom CSS please?

James

[Cosmin – SUPPORT]

Hi James,

I don’t see your text elements having extra classes on them, you need to add uniquely named extra classes to each text element, then style them individually, just as I explained above.

Regards,

————————————————————————————————————

Cosmin – Support