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
.fa-trophy{
font-weight:lighter;
}

Solutions/Answers:

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):

https://www.kickstarter.com/projects/232193852/font-awesome-black-tie

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>
</span>

.icon-circle{
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

References