Want to make font-awesome icons thinner

Question

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;
     }

i dont' know if possible, but try to add to the font awesome .fa class (the one inside the fontawesome css) the font weight to 100 or 200 and see what happens — Nick, Feb 17 '15 at 10:45
Check this question: http://stackoverflow.com/questions/17836851/change-font-weight-of-fontawesome-icons yoe may find something useful — Nick, Feb 17 '15 at 12:39
Add a stroke around the font in the opposite color, this will make it thinner, explained here: https://stackoverflow.com/a/36949675/1066234 — Avatar, Dec 12 '17 at 13:15

score 50 · Answer 1 · answered Jul 31 '15 at 08:18

50

You can fix it in webkit with:

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

answered Jul 31 '15 at 08:18

Kiryl Plyashkevich

2,157
19
18

Seems a little hacky, but it does works. Make sure to replace "background-color" with your actual background color. Thanks Kiryl – Patrick Oct 02 '15 at 02:45
4

fyi, only supported in chrome and android – Ben Sewards Feb 02 '16 at 19:07
This is brilliant, and for the time of this comment, it is supported in Microsoft Edge 15+, Firefox 49+ as well as other webkit browsers, all supporting browsers use `-webki`t prefex, http://caniuse.com/#feat=text-stroke – Mi-Creativity Sep 17 '17 at 09:19
1

Non standard https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke – kurroman Mar 06 '18 at 10:17
It may seam like a "hack" because it isn't solved by fontawesome, but it is solved by css; which is a very relevant use case in any browser. Nice answer. Helped me out. – SoEzPz Apr 06 '19 at 05:39
We can't use this in react native, can we? I am trying to reduce the thickness of the plus size here. Could you look at this? snack.expo.io/@lindapaiste/022490 – Oct 12 '20 at 09:17

kurroman · Accepted Answer · 2018-03-06T10:18:42.407

9

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.

edited Mar 06 '18 at 10:18

answered Feb 17 '15 at 12:57

kurroman

978
10
12

score 4 · Answer 3 · answered Nov 26 '20 at 18:32

.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.

score 0 · Answer 4 · edited Mar 16 '19 at 14:35

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.

We can't use this in react native, can we? I am trying to reduce the thickness of the plus size here. Could you look at this? snack.expo.io/@lindapaiste/022490 — , Oct 12 '20 at 09:18

Want to make font-awesome icons thinner

4 Answers4