Search code examples
cssfont-awesome-5

Font awesome 5 listen for unknown icons

I'm using font awesome 5 on my websites. Let's say I miss-spell a icon like this:

<i class="fa fa-map-markerzzzz"></i>

Font Awesome code must detect that it's an unknown icon as it displays ? and ! symbols.

Any idea how I can listen in for this? I'd like to add error reporting. We've an error logging system, and I'd like to send an error to that for every broken icon.

Any ideas how to do that?

Solution

  • It's not so much that FontAwesome detects this, since it's a collection of CSS classes backed by a font file and not a piece of code. Therefore, unfortunately there is no error event that you can listen for.

    A similar question has been asked before, though not for FontAwesome. It appears that your best bet would be to retrieve a list of existing FontAwesome classes, then compare those to the classes used in your code.

    If you use Angular or React, you may be able to wrap the FontAwesome icons in a component and do the error checking there.