FontAwesome 5 (free) and jQgrid compatibility issues

[reypm]

FontAwesome 5 has been released in two flavors: free and pro (paid version). It looks cleaner and nicer than previous 4.x version :)

I was trying to use this version with jQgrid and it does not work properly. See jsFiddle using JS version (SVG) here and using CSS version here.

Is there any chance to get this working soon? If it's not so hard I can help I just need some guidance.

[OlegKi]

The structure of FontAwesome 5 and the CSS classes, which need be used, are heavy changed between FontAwesome 4 and FontAwesome 5. For example, one changed one base common class fa to three classes: fas, far and fab. One changed names of some other classes and so on.

In general, free jqGrid allows to create custom iconSet, which one can use in the same way like iconSet: "fontAwesome". See the wiki article for details and the demo https://jsfiddle.net/OlegKi/ffgg9wdu/. Typically one will have to add some additional CSS rules because ui.jqgrid.css uses fa class very intensive. One will have to change the CSS rules (or add additional rules), which use svg-inline--fa class for example. In any way, the migration from FontAwesome 4 to FontAwesome 5 would take some time. Probably I'll do this in one of the next releases later, but currently I'm very busy: I'm in the middle of the project for one of my customer.

[reypm]

@OlegKi sounds good no rush I will take a look on my time off and see what I can do to help.

Thanks OT: I've leave to jQgrid question on SO when you've a time and since you're busy take a look

[Djuwal]

I used jqGrid quite extensively in an application I wrote, upgraded to bootstrap 4 and then font-awesome 5 followed. Instead of going backwards with the upgrade, I went ahead and tweaked jqGrid to work for me until Olek officially upgrades it. This isn't perfect and I only tweaked the main jqGrid plug-in - I didn't touch treeview at all since I don't use it. But, hopefully this will help someone for now.

On a side note, thanks Olek - your additions to this plug-in have been awesome and your guides and tips on StackOverflow have been extremely helpful. I ended up writing some helper classes in C# for my application to go along with the grid and am eventually going to write up documentation about it...someday - but like you, other projects seem to come first.

This is for the SVG version of font-awesome 5. What I did was added an icon set to the code and added the svg css code to the project as well. Every line that I added or edited has a notation on it so you can see exactly what I did. I am sure there are better ways of doing it, but I needed to get it done quick and this will work as a stop-gap until the real enhancement is made.

jqGridWithFontAwesome5.zip

[OlegKi]

@Djuwal Thank you very much for your post! I think that the information could be helpful for other developers, which uses free jqGrid. I'm currently be in a business trip, but I will review later the changes, which you suggest, and I'll try to include the changes in the main code of free jqGrid.

[reypm]

@Djuwal @OlegKi this is amazing I will give this a try as soon as I have some free time will let you know on the meantime a BIG thanks

[Djuwal]

@reypm I didn't say it above, but to use it, be sure to change your iconSet to 'fontAwesomeSVG' and that you use the svg version of FontAwesome

[OlegKi]

I posted the first version of changes to GitHub (see here), made based on the suggestions from Djuwal. It's sure not a final code. Any bug reports or suggestions are welcome.