Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

    <span class="fa-stack fa-lg fa-5x color-red">     <i class="fa fa-circle-thin fa-stack-2x"></i>     <i class="fa fa-trophy"></i>     </span> 

my css code

    .fa-trophy{       font-weight:lighter;      } 
like image 715
Daniel Avatar asked Feb 17 '15 10:02

Daniel


People also ask

How do I reduce the thickness of font awesome icons?

you could look for another library with a bit thinner aspect, try "icon font" in Google. Show activity on this post. 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.

How do I use thin font awesome icons?

To use the thin style of “font-awesome“, you'll need a subscription to a Pro-level plan or a perpetual Pro license that includes the specific version of Font Awesome in which this icon (or style) was released.

Can you resize font awesome icons?

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

How do you make material icons thinner?

If you check the icon code, it generates an SVG image. You can make use of a tool like this to override the path element's d property There is a way to reduce it: nimb.ws/nz8wM1 Try to use this tool to reduce the size and alignment: yqnn.github.io/svg-path-editor Might not look standard but one of the ways.


1 Answers

You can fix it in webkit with:

-webkit-text-stroke: 1px background-color; 
like image 106
Kiryl Plyashkevich Avatar answered Sep 22 '22 00:09

Kiryl Plyashkevich