Add icons from FontAwesome to Icons list on Nodebb

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.

https://fontawesome.com/v5/icons/book-open?f=classic&s=solid

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:
Screenshot from 2023-05-11 07-13-43.png

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.

ScreenShot 2023-05-20 в 18.53.00.png

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?

brazzerstop

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

pro version

On my situation I talk about free icons and have this problem in 3.2.2 version - https://community.nodebb.org/topic/12809/add-icons-from-fontawesome-to-icons-list-on-nodebb/17?_=1689718133094

brazzerstop

The problem is related to the lack of the correct class when selecting some free icons, such as microblog.

Found free icon in selector:

We get incorrect result becouse icon have class fa fa-microblog

Free icon work if we change class name to fa-brands fa-microblog

oplik0

Yeah, I see the issue now - the style isn't passed along from the selector, so icons that aren't solid or covered by a fallback end up broken.

I'll try working on this tomorrow probably.

DownPW

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

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

Thanks @oplik0 Always