Using FontAwesome 5 JS+SVG with Bootstrap 4 DataTables and Responsive

Joyrex

Since Allan and the awesome community here has helped me so much over the years using DataTables, I like to try and give back whenever I can in some small way.

This came about when FontAwesome 5 came out and with it their new implementation - JS+SVG, which in my opinion makes cleaner SVG sprites than the old webfont method.

As such, I needed to update my old FontAwesome 4/Bootstrap code to use the new methodology. Now, FontAwesome themselves will tell you using pseudo-element replacement is a "last resort" as JS has to parse out all the pseudo-elements (which can get resource-costly if you have a page with dozens of FA icons). This being just for table headers and the responsive icons, I figured it wouldn't be too bad performance-wise. You can always use the webfont approach, but that means loading the webfonts, etc.

Now, this is just a first-pass at the code, so if you can improve upon it, by all means! If I refine it further myself, I'll share it here. I hope this helps anyone out in some small way.

Also, note that my implementation of Responsive uses a column, and the CSS and JS here reflect that - it shouldn't be too hard though to get the appropriate CSS to target via your browser's Developer Tools to replace the +/- Responsive controls with FA icons. The only item I haven't worked out (yet) is how to make the FA icon itself clickable and trigger the responsive collapse/expand - you click anywhere in the table cell but the FA icon.

Here's a demo: http://live.datatables.net/nojibawa/1/edit?html,css,js,output

allan

Looks great - thanks for sharing this with us!

Its odd that the FA icon itself isn't clickable. The click event should bubble up...

Allan

bindrid

What a lot of people do not understand is that the <I> gets consumed (if you use the default settings) when FA5 creates the SVG element. So, if you put an event handler on the <I>, it gets lost.

My workaround was to put all of my fa5 icons inside of a span, and put the event handler on that.

Also, to make this work, via a css class name, I add pointer-events:none to the <I>, which will get copied to the svg class when it is created.

Those that publish public libraries have no control over that setting so I would always make sure my <I> is in its own container.
Scott

bindrid

@allan and @Joyrex just to call your attention to my comment above.

allan

So does that happen because FA has Javascript that stops the propagation of the click event, or does the SVG effectively make up its own document, and therefore it can't propagate out?

Allan

Vad1997

I found using FontAwesome SVG very useful. I have an issue with Win10 and IE11 in corporate environment described here (Block untrusted fonts in an enterprise):
https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise.
and here:
https://blogs.technet.microsoft.com/secguide/2017/06/15/dropping-the-untrusted-font-blocking-setting/

But what interesting that SVG display correctly and .woff, .ttf, .eot blocked.
You can see errors like CSS3111: @font-face encountered unknown error. in dev console in IE 11.