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

PitaJ

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

josef

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

Screen Shot 2022-06-29 at 9.10.19 PM.png

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

Screen Shot 2022-06-29 at 10.17.27 PM.png

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