Optimizing Font-Awesome with custom font generation
Icon fonts are a web development and design convenience that made a big splash through their use within the bootstrap CSS framework and the highly popular open source Font-Awesome icon font. However, these icon fonts can have a hidden file size cost, which is that they can contain hundreds of extra icons your application isn't using, but that are still being loaded in the browser by the user.
What we really want is the benefit and flexibility of using an icon font, that only includes the icons we actually need. Such a practice can be done manually through font generation tools such as icomoon.io. However, it is also possible to fully automate this process using our WebPack build system to automatically generate this custom icon font for us.
Getting ready
Let's build a custom web font to replace our full Font-Awesome library usage. We will continue to leverage all the advanced features of Font-Awesome, including our angular2-fontawesome module...