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; }
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.
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.
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.
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.
You can fix it in webkit with:
-webkit-text-stroke: 1px background-color;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With