How to Style Icon Color, Size, and Shadow of Font Awesome Icons

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



Leave a reply



Submit