The Use of Icons
The Implementation of font-based icons into a website has been growing in popularity for some time now as they are easy to use, small in size, and fast. According to thenextweb, an icon font can load up to 14% faster than images and be as much as 90% smaller than an SVG file. These font-based icons, also known as glyphicons, are designed to be simplistic in design and scale to any size without loosing quality.
Many glyphicon libraries are implemented into a website via downloading the font file and then referencing that file in the HTML document. Icons are then called upon defining the class that corresponds to the icon you wish to use. For example, in the case of Fontawesome, calling the bluetooth icon would correspond to:
<i class="fa fa-bluetooth-b"></i>
Although icon fonts are quite small compared to their image counterparts, there is still room to further improve their delivery through using a glyphicons CDN combination. Using a CDN to deliver your icon font file will help improve loading times as once the file is cached, your visitors retrieve the file from the nearest available edge server. This helps improve your RTTs as the requests and responses won’t not need to travel as far.
Websites That Offer a Glyphicons CDN Option
There are a variety of icon font websites that are offering a glyphicons CDN option. The following list outlines a few of these options along with the icon CDN URL that can be used to reference the glyphicon library in your web project.
Fontello – Icon CDN
Fontello is an icons font generator which means that it collects icons from various sources and allows you to create your own customized icon font file. There is a third party service available for accelerating font packs generated from Fontello called cdnicon.net. Using this service, you can click the link provided on their website to be redirected to Fontello, select your icons, and then select “Export font”. This will redirect you back to the cdnicon website and provide you with the necessary CDN links to include in your web project.
Evil Icons – Icon CDN
Evil Icons is an SVG icon pack that also allows for their icon file to be delivered via a CDN. To use this icon set via a CDN, include the following links within your HTML (ensure that you first check for the latest version x.y.z).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/evil-icons/x.y.z/evil-icons.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/evil-icons/x.y.z/evil-icons.min.js"></script>
Of course, for each of these options if you already have a CDN, you can simply push or pull your font icons file to be cached and don’t need to include an additional CDN like the ones mentioned above. Additionally, in the case that a glyphicon library does not have a corresponding CDN URL, simply delivering it from your own CDN instead of your origin server will help improve performance. In either case, using a CDN to accelerate the delivery of your glyphicons is beneficial in terms of overall website speed.