I have some font awesome icons that I want to change to a different color but for some reason it will not work. Here's my html and css:
HTML
<span><i class="fas fa-globe fa-5x change-color"></i></span>
CSS
.change-color {
color: #3993e5 !important;
}
I fixed it.
I just had to wrap the icon with a div
<span><div><i class="fas fa-globe fa-5x change-color"></i></div></span>
Will if you using the js file from FontAwosem you should know that this I HTML tag will be removed and replaced with SVG tag so all you need to do is say something like that in your CSS file
svg {
color: white;
}
Be sure that your icon font-family is Font-awesome.
.change-color {
font-family:FontAwesome;
color:red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fas fa-globe fa-5x change-color"></i></a>
<a href="link">
<i class="icon is-ac-coloured fab fa-facebook-square fa-2x"></i>
</a>
a:has(> img), a:has(> i) {
text-decoration: none;
}
Why can I still see the underline on the image?
I'd like it to be removed if an anchor link wraps an image or an italic tag.
:has() is a CSS4 selector its a working draft: https://drafts.csswg.org/selectors-4/#relational, looking at https://caniuse.com/#search=%3Ahas there isnt great browser support. So that might be the reason you are seeing nothing its simply not being parsed.
Going to have to write this using JavaScript or alternatively attach a class to your anchors that are warping images and icons.
.remove-text-decoration {
text-decoration: none;
}
When I hover on font-awesome's icons (when they're stacked together) like below (see picture). I get these strange underlines. Any idea where they could come from?
Source:
<div class="text-center">
<!-- FB -->
<a href="http://www.facebook.com/share.php?u=${shareURL}" target="_blank" style="color : #555">
<i id="facebook" class="fa-3x fa fa-facebook-square"></i>
</a>
<!-- Twitter -->
<a href="http://twitter.com/?status=Sign-Up+for+SolidTranslate+here!:+${shareURL}+#SolidTranslate" target="_blank" style="color : #555">
<i id="twitter" class="fa-3x fa fa-twitter-square"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=${shareURL}&title=Sign-Up%20for%20SolidTranslate%20here:%20${shareURL}&summary=To%20get%20started%20translating%20SolidWorks%20files%20register%2\
0here:%20${shareURL}&source=${shareURL}"
target="_blank" style="color : #555">
<i id="linkedin" class="fa-3x fa fa-linkedin-square"></i>
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=${shareURL}" target="_blank" style="color : #555">
<i id="googleplus" class="fa-3x fa fa-google-plus-square"></i>
</a>
</div>
Those lines usually come from the default (underline) a element style.
Either use another element or remove the underline :
a.social { /* or whatever your class */
text-decoration: none;
}
"text-decoration: none;" needs to be set with the ":hover" selector on the "a" tag, like this...
a:hover {
text-decoration: none;
}
Fontawesome great and fun. But if you are using it as font, this is expected behaviour.
Add text-decoration to every state.
If you don't add :link it will show purple underline, very hard to see but it is there.
If you don't add :active it will show red underline when clicking, very visible.
a:hover, a:focus, a:active, a:visited, a:link{
text-decoration: none;
}
Remove text-decoration for hover effect on all fa class objects:
.fa:hover {
text-decoration: none;
}
Assuming you are using a tags
text-decoration: none;
It may also be necessary to use the important keyword in your class definition
text-decoration: none !important;
Well, I had the exact same problem, and it turned out that what was causing mine was a background change on hover effect I had set to my container. I just had to change the selector to a class selector and everything was fixed!
I downloaded a web site template from this link. How can I change the icon's style in the navigation menu of the index.html page?
<i class="fa fa-home" style="color:black; font-size:48px"></i>Home
This didnt work
So I introduced the style through a new class "fa-home-a"
.fa-home-a {
color:black;
}
and changed my html to this
<i class="fa fa-home fa-home-a"></i>Home
but this didnt work as either
Don't use the modified class use the original class that is fa-home and apply external css which is
.fa-home {
color:black;
font-size:80px;
}
If this does not works then you will have to give the refrence of the parent class
<i class="fa fa-home" style="color:black; font-size:48px"></i>Home
I want to say that the problem is coming from the inline-style reference, there is a missing semi-colon ;
I found the solution.
I added "color" property to following piece of code
#hornav li [class^="fa-"]:before,
#hornav li [class*=" fa-"]:before {
...
color:#ffd602;
}
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?
<i class="icon-cog"></i> Edit profile
This worked for me:
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
.fa-cog {
color: black;
}
HTML:
<i class="icon-cog blackiconcolor">
css :
.blackiconcolor {color:black;}
you can also add extra class to the button icon...
You can specify the color in the style attribute:
<i class="icon-cog" style="color:black"></i> Edit profile
Try this:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
To change the font awesome icons color for your entire project use this in your css
.fa {
color : red;
}
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>
Is there any possible way to change the color of a font-awesome icon to
black?
Yes, there is. See the snipped bellow
<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Here is what you need to use -->
Edit Profile
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.
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.
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
For me the only thing that worked is inline css + overriding
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
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>
.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
You can change the Font Awesome's icon color with the bootstrap class
use
text-color
example
text-white
Sometimes changing the colour in the external css file doesn't work. You can add inline css property in the icon tag and that will work.
For example
<i class="fa-solid fa-keyboard" style="color: grey;"></i>
just give it the style whatever you want like
style="color: white;font-size: 20px;"
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>
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">
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
If you want to change the color of a specific icon, you can use something like this:
.fa-stop {
color:red;
}
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.
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!
I added a style, then color of your choice and make sure to make it bold
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.