Which icons from https://fontawesome.com can use NodeBB?

[josef]

Hi,
I see that some of the icons on the https://fontawesome.com website work here in the forum, for example fa fa-fw fa-pencil
But many other icons do not work, even free ones
Is there a specific rule - a category or filter in fontawesome where all the icons will work for sure on the NodeBB site?
Thank you

[josef]

OK, so to sum up:
The icon should be:

• free (Sometimes only one style is free, for example only solid)
• Version 5
• Only solid design works!

[PitaJ]

@josef can you give an example of some that don't work? All "free" icons should be available.

[josef]

@PitaJ example

<i class="fa-solid fa-pen-clip"></i>

[crazycells]

I think you should check font awesome 5 icons, not 6.

[josef]

OK, so to sum up:
The icon should be:

• free (Sometimes only one style is free, for example only solid)
• Version 5
• Only solid design works!

[crazycells]

@josef said in Which icons from https://fontawesome.com can use NodeBB?:

OK, so to sum up:
The icon should be:

• free
• Version 5
• Only solid design works!

For example this: far fa-pencil-ruler will not work, but this fas fa-pencil-ruler will work.

can you also try different font weights? It might work. I am not sure how it works, but thanks to @phenomlab , we have these changes for vote icons:

// Change the icon for votes
span.votes {
    .fa-chevron-up:before {
        content: "\f164";
        font-weight: 400;

    }
    .upvoted .fa-chevron-up:before {
        content: "\f164";
        font-weight: 900;
    }
    
    .fa-chevron-down:before {
        content: "\f165";
        font-weight: 400;
    }
    .downvoted .fa-chevron-down:before {
        content: "\f165";
        font-weight: 900;
    }
}

as you can see, font-weight changes the icon between
solid and regular.

[josef]

@crazycells Try changing the font weight... For me, it erases the icon from the screen
example:

<selectot>:before {
      content: "\f515";
      font-weight: 900;
 }

[crazycells]

@josef said in Which icons from https://fontawesome.com can use NodeBB?:

@crazycells Try changing the font weight... For me, it erases the icon from the screen
example:

<selectot>:before {
      content: "\f515";
      font-weight: 900;
 }

hmm for me

content: "\f515";

did not turn anything but

content: "\f515";
font-weight: 900;

turned into a scale...

[josef]

@crazycells Obviously, it's a solid design supported...
https://fontawesome.com/v5/icons/balance-scale-left?s=solid
The question is do you manage to present a different style - for example regular (https://fontawesome.com/v5/icons/balance-scale-left?s=regular)....

[phenomlab]

If you are using FA free, then only the solid icons will work - for the others, you need a subscription

[oplik0]

@josef
far fa-pencil-ruler is a paid icon (the solid version is free). Free parts of the regular pack work just fine - see https://fontawesome.com/v5/search?m=free&s=regular for a list of them. It's much more limited than the solid free pack though (151 icons vs 1001), so that's probably why you ran into this problem so easily.

The only issue that you might run into if you're using a version before v2.2.0 is that fab class conflicts with another class in Persona theme turning all brand icons into action buttons, but this is resolved in current versions of Persona.

If you have a paid version of FA5 it should be fairly simple to use it instead - you'd need to replace the FA files in public/vendor/fontawesome with the new ones, set fa-font-path to vendor/fontawesome/webfonts in _variables.less and import the light and duotone less files in src/meta/css.js.

Also, I wanted to add that FA6 is slated to be added in NodeBB 3.0 (it's waiting until a major release since icon style being changed is possibly breaking) https://github.com/NodeBB/NodeBB/pull/10701