How to style icon color, size, and shadow of FontAwesome Icons
Given that they're simply fonts, then you should be able to style them as fonts:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
How to style icon color, size, and shadow of FontAwesome Icons
Given that they're simply fonts, then you should be able to style them as fonts:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
Can I change the color of Font Awesome's cog icon?
This worked for me:
.icon-cog {
color: black;
}
For versions of Font Awesome above 4.7.0, it looks this:
.fa-cog {
color: black;
}
How to change color of icons in Font Awesome 5?
Font Awesome 5 uses svg
for icons and path
inside are set with fill:currentColor
so simply change color of svg
:
.icons svg { color:#2759AE;}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script><div class="container mt200 icons"> <div class="col-md-3"> <div class="bggray2 text-center"> <i class="fas fa-microphone fa-5x"></i> <div class="title">LOREM</div> <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div> </div> </div> <div class="col-md-3"> <div class="bggray2 text-center"> <i class="far fa-edit fa-5x"></i> <div class="title">LOREM</div> <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. </div> </div> </div></div>
How to change the inner white color of Font Awesome's exclamation triangle icon?
The exclamation mark of this icon is a transparent part, so a trick is to add a background behind it to have the needed coloration. Of couse, the background shouldn't cover the whole area so we need to use a gradient to cover only a part of it.
.fa-exclamation-triangle { background:linear-gradient(red,red) center bottom/20% 84% no-repeat;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"><i class="fas fa-exclamation-triangle fa-7x"></i><i class="fas fa-exclamation-triangle fa-4x"></i><i class="fas fa-exclamation-triangle fa-2x"></i>
Font-Awesome Icons, Change Color In The Middle of The Icon (The Text) On Hover
This is also solvable by using Font Awesome's stack system, just like in the link you mentioned:
<a href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank">
<span class="fa-stack icon-facebook">
<i class="fa fa-square fa-stack-1x outside"></i>
<i class="fa fa-facebook fa-stack-1x inside"></i>
</span>
</a>
And the CSS:
.social-media a .fa-stack {
font-size: 13px;
}
.social-media a .outside {
font-size: 25px;
}
.social-media a .inside {
font-size: 17px;
color: #1B3764;
}
.social-media a:hover .inside {
color: #1971b9;
}
#social-media-container { position: relative; margin-top: 10px; background-color: #1B3764;}
.social-media a { color: #ffffff; display: table-cell; font-size: 25px; padding: 0px;}
.social-media a .fa-stack { font-size: 13px;}
.social-media a .outside { font-size: 25px;}
.social-media a .inside { font-size: 17px; color: #1B3764;}
.social-media a:hover .inside { color: #1971b9;}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /><div id="social-media-container"> <li class="social-media"> <a href="https://www.facebook.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank"> <span class="fa-stack icon-facebook"> <i class="fa fa-square fa-stack-1x outside"></i> <i class="fa fa-facebook fa-stack-1x inside"></i> </span> </a> </li> <li class="social-media"> <a href="https://www.twitter.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank"> <span class="fa-stack icon-twitter"> <i class="fa fa-square fa-stack-1x outside"></i> <i class="fa fa-twitter fa-stack-1x inside"></i> </span> </a> </li> <li class="social-media"> <a href="https://www.linkedin.com/gatewaywebdesign18/?ref=aymt_homepage_panel" target="blank"> <span class="fa-stack icon-linkedin"> <i class="fa fa-square fa-stack-1x outside"></i> <i class="fa fa-linkedin fa-stack-1x inside"></i> </span> </a> </li></div>
How to change color of Vue 3 font awesome icon?
If you want to use pure CSS then locate it, refer directly to the path and set the fill color.
Right click and inspect with console is the best way to locate elements, but for mor accurate try
<fa icon="bomb" color="#E1FF00" id="my_bomb_icon" size="lg"/>
and in the css (if inline color property don't work) add
#my_bomb_icon path {
fill: #E1FF00
}
Alternatively, you can try to add the color as a direct property, then you will create the icon like so
<fa color="red" icon="bomb"></fa>
. Also if you need a specific color then set the hex code<fa color="#3caa0c" icon="bomb"></fa>
Font Awesome icons get hidden after css transform
give z-index:-1
for .social-btns .btn:before
Related Topics
Css Scrollbar Style Cross Browser
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
Semi-Transparent Color Layer Over Background-Image
Add Bootstrap Glyphicon to Input Box
Css3 Transition Animation on Load
How to Add a Color Overlay to a Background Image
Truncating Long Strings With Css: Feasible Yet
Which CSS Properties Are Inherited
How to Prevent CSS Inheritance
How to Apply Specific CSS Rules to Chrome Only
Justify the Last Line of a Div
How to Interpolate CSS Variables With Url()
Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]
How to Hover Over One Element and Affect a Different Element