How to Change Font Awesome Icon Color (HTML, CSS & WordPress)

People overthink this one. They hunt for a Font Awesome "colour setting", a special class, a plugin.

There isn't one.

A Font Awesome icon takes colour exactly like text, because it is text. It is a font glyph (or an SVG that inherits the text colour), styled with plain CSS. So changing its colour is one CSS property you already know: color.

I have shipped Font Awesome on dozens of sites. Below are the four ways I actually use, each with a real rendered example, plus the WordPress method and the reasons a colour change sometimes refuses to stick.

How do you change a Font Awesome icon colour?

Set the CSS color property on the icon, or on any parent element, and the icon changes colour.

That is the entire trick: the icon matches whatever colour the text around it is, because it is a glyph in a font, not an image. There is no special setting to find.

That is the whole idea. The methods below are just where you put that one color rule.

The methods at a glance

Inline style (one icon)

The quickest way to colour a single icon. Add a style attribute right on the <i> tag. Inline styles beat class rules, so this always wins.

html

<i class="fa-solid fa-heart" style="color:#e11d48"></i>

Good for a one-off. If you find yourself pasting the same colour onto ten icons, switch to a class.

A CSS class (many icons)

When several icons share a colour, give them a class and set color once in your stylesheet. Change the colour in one place and every icon updates.

css

.icon-brand { color: #0693e3; }

html

<i class="fa-solid fa-envelope icon-brand"></i>
<i class="fa-solid fa-phone icon-brand"></i>

This is the method I use most. It keeps colours consistent and out of the HTML.

Set the colour on the parent

Because icons inherit colour, you often do not target the icon at all. Set color on the button, link, or box, and the icon comes along for free.

css

.cta-button { color: #ffffff; }   /* the text and the icon both go white */

html

<a class="cta-button">Get started <i class="fa-solid fa-arrow-right"></i></a>

Fewer rules, less to maintain. The icon simply matches its surroundings.

In WordPress: Additional CSS

On WordPress you do not edit theme files. Go to Appearance → Customize → Additional CSS and paste a rule. It applies across the whole site and survives theme updates.

css

/* every icon navy */
.fa-solid, .fa-regular, .fa-brands { color: #0f1e3d; }

/* just the footer heart, red */
.site-footer .fa-heart { color: #e11d48; }

For a single icon in one post, skip this and use an inline style inside a Custom HTML block instead. New to WordPress? Our WordPress tutorial for beginners covers the basics first. On WordPress.com the box sits somewhere else, so I covered where custom CSS and fonts live on WordPress.com separately.

How do you change the colour on hover, or add a gradient?

For hover, add a :hover rule that sets a new color, with a transition on the base rule so it fades instead of snapping. For a gradient, clip a background gradient to the glyph with background-clip: text and make the color transparent. Size is separate again: plain font-size, or Font Awesome's own sizing classes.

Colour on hover. Add a :hover rule, and a transition so it fades:

.icon { color: #64748b; transition: color .2s; }
.icon:hover { color: #0693e3; }

Whatever colour you land on, check it still reads against the background. The WCAG colour contrast rules give you the quick pass or fail check.

A gradient fill. Icons cannot take a gradient on color directly, but the text-clip trick works:

.icon-grad {
  background: linear-gradient(135deg, #0693e3, #9b51e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Size and colour together. Size is font-size (or Font Awesome's own fa-2x, fa-3x classes), and it is independent of colour:

.icon-lg { font-size: 2rem; color: #16a34a; }

How do you colour a duotone (two-tone) icon?

Duotone icons have two layers, so a single color only paints the main one. Set the --fa-primary-color and --fa-secondary-color CSS variables on the icon to colour each layer separately, and --fa-secondary-opacity to control how faded the lighter layer looks:

.fa-duotone {
  --fa-primary-color: #0f1e3d;
  --fa-secondary-color: #0693e3;
  --fa-secondary-opacity: 0.5;
}

Duotone is a Font Awesome Pro style, so the free set will not show the second layer. The Font Awesome customising docs list every variable if you have Pro.

Why is my Font Awesome icon colour not changing?

Nine times out of ten, another CSS rule is beating yours on specificity. Target the icon more precisely or add !important. The other usual suspects: the "icon" is actually an image file, a cache is still serving the old stylesheet, or the rule landed on the wrong element. Here is each one.

• Another rule is winning. A theme or framework style is more specific than yours. Target the icon more precisely (for example .card .fa-star instead of .fa-star), or add !important as a last resort.
• It is an image, not an icon. If the "icon" is a PNG or SVG <img>, color does nothing. Only font glyphs and inline SVG with fill: currentColor respond to color.
• Caching. On WordPress especially, clear your cache (and any CDN) after editing CSS, or you will keep seeing the old colour.
• The class is on the wrong element. Make sure color lands on the <i> (or its parent), not a sibling.

Final take

Font Awesome colour is not a feature to hunt for. It is the plain CSS color property, the same one you use for text.

Inline style for a single icon, a class for many, the parent for a whole block, and Additional CSS for a WordPress site. Learn that one rule and every variation, hover, gradient, duotone, is just a small extension of it.

And since the icons are literally type, they look best when the rest of your type is right too. My picks for the best fonts for WordPress cover that side.