Want to make font-awesome icons thinner

Want to make font-awesome icons thinner

I was working with font awesome icons but the problem is they have default font weight . i want it a little bit thinner. but its not working
my html code

my css code


Solution 1:

Sorry, it´s not possible to do that using standards (if it is not important in your project you can use the Kiryl Ply suggestion). Font-Awesome comes with just one font-weight variant. There is a new project to solve that problem (not ready yet):


you could look for another library with a bit thinner aspect, try “icon font” in Google.

Solution 2:

You can fix it in webkit with:

-webkit-text-stroke: 1px background-color;

Solution 3:

try with this

  .class-name i{
        -webkit-text-stroke: 2px white;

Solution 4:

I know this is an old question, but hopefully my answer can help someone who wants a thinner circle when stacking two font awesome icons. I spent a lot of time and energy before I stumbled across this article which helped me in the right direction. My solution:

<span class="fa-stack fa-3x">
   <i class="fa fa-circle fa-stack-2x icon-circle"></i>
   <i class="fa fa-leaf fa-stack-1x"></i>

color: transparent !important;
border: 5px solid #YourColor;
border-radius: 50%;}

When I clean up my code I can probably remove the !important tag, but this is how my code looks 5 minutes after I found my solution.

Related:  Bootstrap 3 Carousel Not Working