Want to make font-awesome icons thinner

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.


try with this

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

.yourclass::before{    
content: "\f07a";
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    -webkit-text-stroke: 0.5px white;
    color: transparent;
}

this did the work for me, change the color to transparent and add a text stroke of your favorite color and you can also change the text stroke to 1px or more if you want.


You can fix it in webkit with:

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