Change color – icons

[NMillard]

Hi,

How to change the colors of fontawesome icons and the also circle around it? 🙂

/Millard

[George]

I would also like some assistance with this same thing.

From what I understand you have to add some css to somewhere that does something… i’m out of my depth.

[Sean]

Just add/edit the CSS…
For example, the code below will change all Font Awesome icons to white.

.fa { color:#FFFFFF; }

Which icons do you want to change and also what the color or HEX code for the color?

[George]

Hi,

Thank you for that reply.

Where do would I add the CSS?

And i want to change the colors of icons on different pages. Not just all icons to a certain color.

If i do add a code to the CSS, for example changing the plane icon to green (or whatever color code).

What should i add to the code where i am placing the icon?

Thank you.

[Melanie – SUPPORT]

If you show me a concrete page with an icon on you want to change I can give you custom css and explain how to change it to different pages, icons and colors.

[George]

Hi Melanie,

Here is a page, where we have icons in titles and in buttons;

http://events.hubspokes.com.au/contact-us/

I look forward to your response.

[Melanie – SUPPORT]

Okay here we go, for example the phone icon color on that page can be changed with this custom css

.page-id-298 .icon-phone {
color: black;
}

You can replace the page ID with the page id of the page you like to change the icon color on, and the icon-phone to whichever icon you are using 🙂 Cheers

[aaustin69]

Hi, as a follow up question to this older post:

Is there a way to create a border color for the icon circle/container? I can see that the Color Customizer has a place to add the icon container background color. I would like to make the circle background color white (which I can do in the Color Customizer), but then also add a color border around the circle. So basically it would be a blue circle border with white background, and then the icon in the middle.

I have attached an image that I created as an example. I had to create this by hand, so it would be much easier if there is some code I can use to do this.

Thanks.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.sf-icon-cont {
  border: 2px solid blue;
}

– Kyle

[aaustin69]

Thanks Kyle,

That works great for colors like ‘solid blue’ or ‘solid black’, etc. Is there also a way to make it work for a certain hex color? For example, if I want to use the color #1e6fd8, how would I add this?

I tried the code below, but it does not seem to work:

.sf-icon-cont {
border: 5px #1e6fd8}

[Kyle – SUPPORT]

Just replace ‘blue’ with the hex value, so:

.sf-icon-cont {
border: 5px solid #1e6fd8\
}

– Kyle

[aaustin69]

Perfect, thanks.

[Mohammad – SUPPORT]

Hi,
Great thanks to Kyle.
Mohammad

[guentherportfolio]

Hi there Kyle,

I am having a similar problem. Is it possible to change the icon color only on product pages? Thanks in advance

Best
Martin

[Kyle – SUPPORT]

Hi

Which icon?

– Kyle