IconPicker | Font Awesome Icons ( Font Awesome Free v5 | Icon library

you need to add the element index in jQuery as the selector return an array

You could download and parse the icons.json file from the public repo of FontAwesome. Then, you upload it into your application, and make an utility which searchs for the unicode of the selected icon.

I include in this answer a short example of how you could make it work.

I just had to figure this out myself. It depends on whether you're trying to include a preconfigured font or your own.

There is an example of an assets.html provided in the official repository at djangocms_icon/templates/admin/djangocms_icon/includes/assets.html and it's in fact linking to Font Awesome 5 (5.3.1 specifically):

Your variable in setState is misspelled. Apart from this use the advantage of styled component. Pass directly background color and fetch is props like this:

this is indeed tricky. Let me give some background:

1. Fontawesome has different font files and different css files for targeting the icons
2. Unfortunately this causes trouble in the picker, because the picker cannot be configured to show icon previews with different prefixes - so as of now, the picker usually can only be configured to show one set of these icons
3. The same problem arises with the output as you noticed - in some cases a different prefix would be important, but the picker doesn't give you the prefix, just the icon name

We also had another problem that really bugged us: these icon-fonts really hurt our google page speed rating - ca. 10-20 points depending on the scenario! Because of this, we spent almost 2 weeks to find a better solution. And we have found it :). It's just not well standardized / documented :(.

Here's how it works:

1. basically all icons have different names anyhow, so the prefix wouldn't matter. This was just an optimization introduced by font-awesome, but it's not good anyhow.
2. So we need to have a css file which lists all icons, but just correctly uses the right font-file no matter what prefix is used. We can generate such a file and already have some working scripts that do it, but it's not in a state we could share :(
3. This css file should then be used in the icon picker
4. And in the page, because then the prefix doesn't matter

That's how we're solving it. Sorry that it's not simpler.

We're going a step further: if you have the commercial license of font-awesome, you can use a JS loader in your page which doesn't use the fonts at all, but just gets the 3-4 SVGs you're actually including in the page. That gives us the extra 10-20 points on PageSpeed! But because it's commercial license only, I can't share this with the public. If you do have the commercial license though, that's the way I would go.