Icons are an integral part of web designing. They make designing process a lot easier and quicker. Long gone are those days where individual icons were represented via an image. Now, its time for web fonts.
One such web font is Font Awesome, which was initially released back in 2012 by Dave Gandy. Font awesome icons gained a huge popularity in short span of time because they are easy to use and are infinitely scalable, so you do not need to worry about device size. Also, all kinds of icons are readily available for use.
How do you add Font Awesome Icons in your website? It is super easy. Add a css file and call them on demand. You can check here for the process. However, this is not the subject of our article. We are trying to optimize font awesome icons to a very small size.
Why you need to optimize font awesome icons?A straightforward answer: Web Performance. With the addition of font awesome icons set, we have the flexibility to use more than 1500 icons. However, most of us never use more than 20 to 30 icons. There is no benefit in loading all icons when we need only 1 or 2 percent of them.
Moreover, Font Awesome is a huge file (>120KB). It includes web fonts (90KB) and minimized CSS version (30KB). That is sure to hurt web performance during pageload.
Though font awesome icons are cached by web browsers since many website use it, we need to think of new first-time visitors who do not have font awesome cached in their browsers.