Can I change the color of Font Awesome's icon color?
HtmlCssColorsIconsFont AwesomeHtml Problem Overview
I have to wrap my icon within an <a>
tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a>
tag? Font awesome is supposed to be font not image, right?
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
Html Solutions
Solution 1 - Html
This worked for me:
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
.fa-cog {
color: black;
}
Solution 2 - Html
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
you can also add extra class to the button icon...
Solution 3 - Html
You can specify the color in the style attribute:
<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
Solution 4 - Html
To change the font awesome icons color for your entire project use this in your css
.fa {
color : red;
}
Solution 5 - Html
Try this:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
Solution 6 - Html
If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:
<i class="fa fa-cog" style="color:#fff;"></i>
Solution 7 - Html
To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.
HTML:
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
This will make any icon that is a direct descendant of your button black.
Solution 8 - Html
> Is there any possible way to change the color of a font-awesome icon to > black?
Yes, there is. See the snipped bellow
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Here is what you need to use -->
<a href="/users/edit" class="fa fa-cog" style="color:black"> Edit Profile</a>
> Font awesome is supposed to be font not image, right?
Yes, it is a font. Therefore, you are able to scale it to any size without losing quality.
Solution 9 - Html
With reference to @ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesome
icons or if you using fa
classes
.fa.icon-white {
color: white;
}
And, then add icon-white
to existing class
Solution 10 - Html
For me the only thing that worked is inline css + overriding
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
Solution 11 - Html
just give and text style whatever you want like :D HTML:
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
Solution 12 - Html
.fa-search{
color:#fff;
}
you write that code in css and it would change the color to white or any color you want, you specify it
Solution 13 - Html
You can change the Font Awesome's icon color with the bootstrap class
use
text-color
example
text-white
Solution 14 - Html
just give it the style whatever you want like
style="color: white;font-size: 20px;"
Solution 15 - Html
You can change the color of a fontawesome icon by changing its foreground color using the css
color
property. The following are examples:
<i class="fa fa-cog" style="color:white">
This supports svgs also
<style>
.fa-cog{
color:white;
}
</style>
<style>
.parent svg, .parent i{
color:white
}
</style>
<div class="parent">
<i class="fa fa-cog" style="color:white">
</div>
Solution 16 - Html
Write this code in the same line, this change the icon color:
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Solution 17 - Html
If you want to change the color of a specific icon, you can use something like this:
.fa-stop {
color:red;
}
Solution 18 - Html
Use color property to change the color of your target element as follow :
.icon-cog { // selector of your element
color: black;
}
Or in the newest version of font-awesome , you can choose among filled or not filled icons
Solution 19 - Html
It might a little bit tricky to change the color of font-awesome icons. The simpler method is to add your own class name inside the font-awesome defined classes like this:
.
And target your custom_defined__class_name in your CSS to change the color to whatever you like.
Solution 20 - Html
Open the svg file in vs code or something
change the line
path fill="gray" to what ever color you want! in my case i change it to gray!
Solution 21 - Html
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
Using class will give you a free binding property which you can apply on any tag you require.