Add icons from FontAwesome to Icons list on Nodebb

[schajuli]

@brian4021 did you succeed?

[baris]

Warehouse is available in FA 5.15 and 6.0 so it should be available when you use it in the ACP for category icons.

[schajuli]

@baris It's not just the warehouse

[baris]

You can use any of the icons in 5.15.

[schajuli]

@baris said in Add icons from FontAwesome to Icons list on Nodebb:

You can use any of the icons in 5.15.

Reply

And all of the are showing in the preview, or is there another way to add additional ones?

[baris]

You can use the search box in the category page, not all icons are shown since there are too many.

[Jürgen]

@baris

May I come back to this subject again?

Given that 1500 icons are too much to display, I am wondering HOW I can use one of the not displayed one. I have the feeling only the displayed one are available I am looking for books-open and basketball-ball

We are currently running 2.8.11 (we will upgrade later the month)

[brazzerstop]

@Jürgen Try to paste the icon name (example fa-book-open) in search box, click enter and check it.

Book Open Classic Solid Icon | Font Awesome

Book Open icon in the Version 5 Solid style. Make a bold statement in small sizes. Available now in Font Awesome Pro.

(fontawesome.com)

[crazycells]

@Jürgen said in Add icons from FontAwesome to Icons list on Nodebb:

@baris

May I come back to this subject again?

Given that 1500 icons are too much to display, I am wondering HOW I can use one of the not displayed one. I have the feeling only the displayed one are available I am looking for books-open and basketball-ball

We are currently running 2.8.11 (we will upgrade later the month)

What about using custom CSS? I use some that are not on the list via custom CSS.

Use an unrelated specific one that has no use at other parts of the forum, and then change it to the one you want such as...

i.fa-y-combinator-square::before{
    content: "\f65e" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

[Jürgen]

@brazzerstop said in Add icons from FontAwesome to Icons list on Nodebb:

@Jürgen Try to paste the icon name (example fa-book-open) in search box, click enter and check it.

obviously I am searching in the wrong place:

it does not display 'search' but 'filter'. Actually I have no idea where to find the form to search an icon. Can someone please guide me there?

[baris]

@Jürgen That doesn't look right, when I search info I get the below.

[Jürgen]

one of my clickpathes:
settings->navigation->icon
differing to your screenshot my reads 'type to filter icon'. Yours is reading 'type to search icons'. Is there any additional setting or plugin, I need to activate or install?

[baris]

Same on navigation page

Maybe you are not on latest nodebb, try updating and running ./nodebb build again.

[Jürgen]

thx for the support. we'll run the update soon ....

[brazzerstop]

Hm... I can't found a globe icon: https://fontawesome.com/v6/icons?q=globe&o=r&m=free

<i class="fa-solid fa-globe"></i>

NodeBB 3.0.1 (develop)

UPD

I was upgrade to version 3.1.4, that not helped and I found this bug, some icons not work, but have in the search results.

Micro.blog Icon | Font Awesome

Micro.blog brand icon. Available now in Font Awesome 6.

(fontawesome.com)

<i class="fa-brands fa-microblog"></i>

[DownPW]

Same problem here, some icons don't appear on acp with search

Example for fa-list-tree in font awesome 6.
I have Font Awesome 6.x Pro version installed and declare on acp/custom header like this :

<!-- Font Awesome 6 Pro -->
<link href="/assets/XXXXXXXX/FontAwesome-Pro-6.3/css/all.css" rel="stylesheet" />

List Tree Classic Solid Icon | Font Awesome

List Tree icon in the Solid style. Make a bold statement in small sizes. Available now in Font Awesome 6.

(fontawesome.com)

Not appear with search name :

Thanks

EDIT: If I use CSS code with content & font family attribute, no problem

[baris]

Could be because the search module is only searching in the free icons? @oplik0
https://github.com/NodeBB/NodeBB/blob/master/public/src/modules/iconSelect.js#L352-L385

[DownPW]

any news @baris @oplik0 ?

[oplik0]

@DownPW As Baris mentioned, the selector is specifically filtering for free icons since that is what NodeBB ships with and currently things weren't really set up for the pro version at all.

I didn't have much time in June, but I'm starting to come back to things related to NodeBB now so I'll probably try to do something around this soon-ish.

Ideally I'll probably want to make transition to FA pro and FA updates a bit easier in general by moving everything to their npm packages, with a config option for using the pro package that would properly include it and also change the icon selector behaviour (though installation would have to be manual since they're using a private registry for that).

[julian]

@oplik0 any chance the FA folks would be willing to help make it easier for us?