Skip to Content (Press Enter)
UserImage.jpg
Jean-Pierre Brits
4075Views
6Comments
Changing color of icons
Question
Hi there.

I would like to change the color of font-awesome icons in containers. I've tried a few things. Any suggestions?

Cheers
1
0
09 Mar 2016
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Hi Jean-Pierre,

You can change the colour by using CSS-styling. The icons are actually text, so setting the "color" property changes the colour.
0
0
09 Mar 2016
Copy Link
UserImage.jpg
Jean-Pierre Brits
I've creates this:

.SeverityButtons {
  background: #fff600;
  color: #FF0000;
}

background works but the icon stays the same ...
2
0
09 Mar 2016
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Use your browser's devtools to see why. Most likely, it's overridden by another style.
0
0
09 Mar 2016
Copy Link
2016-04-15 10-32-21
marco groenenberg

Most likely, it's overridden by another style.Because I suppose it is a link. All links are defined in the Theme.

SyntaxEditor Code Snippet

a, 
a:link, 
a:visited {
  color: red; /*primary-color*/
}
1
0
07 Jun 2017
Copy Link
2016-08-14 15-21-18
Jogait

you can enclose the icon in a container and apply a text color to the container, also remove the width of the container. Other options is to use the devtools of the browser and then create CSS for that.

5
0
07 Jun 2017
Copy Link
UserImage.jpg
Vanga Jyothi

Jean-Pierre Brits wrote:

Hi there.

I would like to change the color of font-awesome icons in containers. I've tried a few things. Any suggestions?

Cheers



SyntaxEditor Code Snippet

@import url(/RichWidgets/Theme.FontAwesome.css);

/* fallback for offline web editor, the icons are not available */
.fa:after {
    content: "N/A";       
}


.fa{

color:red;

}


try this in local theme,it overrides css theme

0
0
21 Oct 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.