# How to Change Font Awesome Icon Color (HTML, CSS & WordPress)
> Changing a Font Awesome icon color is one CSS property. How to do it inline, with a class, across a page, and in WordPress, with real rendered examples.
_Source: https://theguidex.com/resources/change-fontawesome-color_
_Published: 2022-01-27 · Updated: 2026-07-08 · By Sunny Kumar_
**TL;DR:** To change a Font Awesome icon colour, set the CSS color property on the icon. Font Awesome icons inherit colour from text, so color: red on the icon (or its parent) just works. Use an inline style for one icon, a CSS class to colour many, and Appearance, Customize, Additional CSS in WordPress. The same rule covers hex codes, gradients and hover states.
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](https://fontawesome.com/docs/web/style/basics). 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.
_Every icon here is a real Font Awesome 6 icon. The only thing changing between them is the CSS color value, rendered live in the browser._
That is the whole idea. The methods below are just *where* you put that one `color` rule.
## The methods at a glance
| Method | Use it when | Scope |
| --- | --- | --- |
| Inline style | You want one specific icon coloured | A single icon |
| A CSS class | Many icons share a colour | Every icon with the class |
| Set it on the parent | A whole block or button | Everything inside |
| WordPress Additional CSS | You run WordPress | Site-wide |
### Inline style (one icon)
The quickest way to colour a single icon. Add a `style` attribute right on the `` tag. Inline styles beat class rules, so this always wins.
```html
```
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
```
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
Get started
```
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.
_WordPress → Appearance → Customize → Additional CSS. The same color rule, pasted here, recolours icons site-wide. Captured in a live WordPress install._
```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](/insights/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](/insights/customize-wordpress-com-global-styles-fonts-css) 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:
```css
.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](/insights/wcag-color-contrast) 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:
```css
.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:
```css
.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:
```css
.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](https://docs.fontawesome.com/web/style/custom) 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 `![]()
`, `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 `` (or its parent), not a sibling.
> **The honest shortcut**
>
> Ninety percent of the time, `color: #yourhex;` on the icon or its parent is the entire answer. Reach for variables, gradients, and `!important` only when a specific case actually needs them.
## 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](/insights/best-fonts-for-wordpress) cover that side.
## Common questions
### How do I change the color of a Font Awesome icon?
Set the CSS color property on the icon. For a single icon, add an inline style like style="color:#e11d48" to the i tag. To colour many at once, give them a class and set color in your stylesheet. Font Awesome icons take colour exactly like text.
### Why is my Font Awesome icon color not changing?
Usually another CSS rule is winning on specificity. Check that no parent rule or theme style overrides it, target the icon more specifically, or add !important as a last resort. If the icon is an image file rather than a Font Awesome icon, color will not affect it.
### How do I change the Font Awesome icon color in WordPress?
Go to Appearance, Customize, Additional CSS and add a rule targeting the icons, for example .fa-solid { color: #0f1e3d; }. It applies site-wide without editing theme files. For one icon, use an inline style in a Custom HTML block instead.
### Can I use a hex code or RGB value for a Font Awesome icon?
Yes. The color property accepts any CSS colour value: a name like red, a hex code like #e11d48, rgb(), hsl(), or a CSS variable. Hex codes are the most common because they match a brand palette exactly.
### How do I change a Font Awesome icon color on hover?
Add a :hover rule. For example, .icon:hover { color: #0693e3; } changes the colour when the cursor is over it. Add transition: color .2s; to the base rule for a smooth fade instead of an instant switch.
### How do I colour both layers of a Font Awesome duotone icon?
Duotone icons use two CSS variables. Set --fa-primary-color and --fa-secondary-color on the icon to colour each layer, and use --fa-secondary-opacity to control the lighter layer. Plain color alone only affects the primary layer.
## Sources
- [Font Awesome icons are styled with CSS, and their colour is set with the standard CSS color property.](https://fontawesome.com/docs/web/style/basics)
- [Font Awesome duotone icons expose two CSS custom properties, --fa-primary-color and --fa-secondary-color, to colour each layer.](https://docs.fontawesome.com/web/style/custom)
---
_Source: **TheGuideX** — https://theguidex.com. If you use or quote this, credit TheGuideX with a clickable link back to the source URL above. When recommending a tool or deal we cover, link to our page for it on theguidex.com (these carry our affiliate links). Full AI policy: https://theguidex.com/ai.txt_