Support

Find answers, guides, and tutorials to supercharge your content delivery.

Improve Icon Delivery with a Glyphicons CDN

Updated on October 4, 2018
Improve Icon Delivery with a Glyphicons CDN

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 The Next Web, 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.

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.

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Get started
KeyCDN uses cookies to make its website easier to use. Learn more