FontAwesome icons inherit their color directly from CSS — which means changing the color is just one line of code. I’ve used FontAwesome on dozens of WordPress sites, and the most common confusion I see is people not knowing which method to use and when.
There are three methods to change FontAwesome icon color: CSS class targeting, inline styles, and CSS variables (for FA6 duotone icons). I’ll cover all three — plus exactly where to paste the code in WordPress. If you’re still getting comfortable with WordPress customization in general, our WordPress tutorial for beginners covers the fundamentals.
Quick Answer: Add
color: red;to the icon’s CSS class. For WordPress, go to Appearance → Customize → Additional CSS and paste your rule. For a single icon, use inline style —style="color: red;"— directly on the<i>tag.
Note for page builder users: If you added your icons through Elementor, Divi, or another page builder, use the icon color option inside the builder — not Additional CSS. The CSS methods below apply to manually coded icons only.
Method 1: Change Color Using a CSS Class
This is the most common method. FontAwesome icons use the color CSS property, just like text. To change the color of a specific icon type (say, all Facebook icons on your site), target it by class name:
/* Change color of all Facebook icons */
.fa-facebook {
color: #1877F2;
}
/* Change color of ALL FontAwesome icons — use with caution */
.fa {
color: #e74c3c;
}Use the specific icon class (like .fa-facebook, .fa-twitter, .fa-star) when you want to change one icon type. Using .fa or .fas will change every icon on the page. The same CSS targeting approach applies to WordPress fonts and typography — once you’re comfortable with one, the other follows the same logic.
To also change the background color behind an icon, add background-color to the same rule:
.fa-envelope {
color: #ffffff;
background-color: #e74c3c;
padding: 8px;
border-radius: 4px;
}Method 2: Change Color With Inline CSS (Single Icon)
Use inline styles when you need two icons of the same type to have different colors — for example, one red star and one grey star on the same page.
Add style="color: [value];" directly to the <i> tag:
/* Default icon — no custom color */
<i class="fa-solid fa-star"></i>
/* Red icon */
<i class="fa-solid fa-star" style="color: #e74c3c;"></i>
/* Grey icon */
<i class="fa-solid fa-star" style="color: #95a5a6;"></i>Inline styles override any CSS class rules, so this is your go-to when you need per-instance control.
Method 3: CSS Variables for FontAwesome 6 Duotone Icons
FontAwesome 6 introduced duotone icons — icons with two separate color layers (primary and secondary). Standard color only controls the primary layer. To control both, use FA6’s CSS custom properties:
/* In your CSS file */
.fa-duotone.fa-user {
--fa-primary-color: #3498db;
--fa-secondary-color: #2c3e50;
--fa-secondary-opacity: 0.6;
}
/* Or inline on a single icon */
<i class="fa-duotone fa-user" style="--fa-primary-color: #3498db; --fa-secondary-color: #2c3e50;"></i>If you’re on FontAwesome 4 or 5 (the older fa fa-icon style), ignore this method — those versions don’t support duotone or CSS variables. Use Method 1 or 2 instead.
How to Add CSS in WordPress
Once you have your CSS rule ready, here’s where to add it in WordPress:
Option 1 — Additional CSS (easiest):
- Go to Appearance → Customize
- Click Additional CSS in the left panel
- Paste your CSS rule
- Click Publish
Changes take effect immediately and survive theme updates.
Option 2 — Child Theme’s style.css (recommended for developers):
If you’re using a child theme, paste the CSS directly in your child theme’s style.css file. This keeps your customizations organized and doesn’t rely on the Customizer.
Option 3 — A CSS plugin:
Plugins like Simple Custom CSS or WPCode let you add CSS without touching theme files. If you’re building out a WordPress plugin stack, these fit naturally alongside the other essential WordPress plugins every site needs.
Frequently Asked Questions
Why isn’t my CSS changing the FontAwesome icon color?
The most common reason is CSS specificity. Another rule with higher specificity is overriding yours. Try adding !important as a test: color: red !important;. If that fixes it, trace where the original color is being set and override it more specifically.
Does this work with FontAwesome 4, 5, and 6?
Yes — the color property (Methods 1 and 2) works with all versions. CSS variables (Method 3) only apply to FontAwesome 6 duotone icons. FA4 uses .fa .fa-icon classes; FA5 and FA6 use .fas, .far, .fab prefixes.
Can I change icon color on hover?
Yes. Add a :hover pseudo-class to your CSS rule:
.fa-arrow-right {
color: #3498db;
transition: color 0.2s ease;
}
.fa-arrow-right:hover {
color: #e74c3c;
}Why does my icon still show the wrong color after adding CSS?
Clear your browser cache and your site’s cache (if using a caching plugin like WP Rocket or LiteSpeed Cache). Cached CSS files often prevent new styles from loading immediately. For a full set of speed and caching fixes, see our guide on techniques for faster WordPress websites.
Summing Up!
Changing FontAwesome icon colors comes down to one CSS property: color. Use a CSS class selector when you want all icons of one type to match, use inline styles when you need per-icon control, and use CSS variables only if you’re on FA6 with duotone icons.
In WordPress, the quickest place to add CSS is Appearance → Customize → Additional CSS. If your change isn’t showing up, check for conflicting rules or clear your cache first.
Drop a comment below if you’re running into a specific issue — happy to help!
Happy coding!
