Using Font Awesome icons in control add-ins
This post has been long overdue. I’ve had it in my to-do list for nearly four years now, but it always ended up in the not today category. Funny how many times I’ve implemented it already, and how many times I’ve presented this, and I never ever found a few minutes to create a demo repository and a blog to come with it. So, here we go.
Including web fonts in your control add-ins is no rocket science, really. Control add-ins are just pieces of HTML, CSS, and JavaScript running in an iframe, so whatever you can do within an iframe from anywhere else, you can do it from control add-ins. Web fonts are no different. The problems start if you want to package web fonts into the control add-in so that you can use them even when your BC/NAV instance is running in an isolated network, or if you simply want to eliminate any external dependencies.
Control add-ins support packaging script, stylesheet, and image files. This could make you think that you cannot include web fonts. But that would be wrong. If you read my blog post about abusing images to load HTML files, then it might give you some ideas. Yes, you can use the same trick to load web fonts or just about any other external resource.
Let’s take a look how to include a web font, and let’s use Font Awesome as an example. Because it’s just awesome.