Replacing the regular font awesome 4 with the SVG version of the icons to optimize loading times

When you load the default version of Font-Awesome 4 for example, the following files will be included in the document and their filesize is specified as well:

• Fontfa-brands-400.woff2 (76.9 kB)
• Fontfa-solid-900.woff2 (76.5 kB)
• Fontfa-regular-400.woff2 (13.9 kB)
• all.min.css (57.7 kB)

The entire size of loading FontAwesome in your website is about 225KB that will be loaded but probably, only 10% of the icons that are loaded will be used on your page (come on, do the test by yourself and tell me if you use more than 20% of the icons in the library).

In case that you are included in the group of developers that don't use all of the icons, this approach will be really helpful for you and will without a doubt, optimize the loading times of your website. It's worth mentioning that this solution is not for everyone, for example, someone that works creating websites for regular people, small businesses, and so on, whose traffic won't be more than 1000 visitors monthly, it would be probably a waste of time to extract every icon that you need to include it in the page and so on, so it would be way simpler to load Font Awesome as usual and that's it.

In case that you care about bandwidth and website speed loading times, you may want to implement this in your project.

1. Pick your icons

There's an awesome repository at Github here that contains the SVG and PNG version of every icon in Font awesome 4. The icons are available in their black and white version, however, this is totally customizable through CSS, what matters is the SVG itself.

In this example, we are going to use the Apple icon of Font Awesome (fa fa-apple) located here: https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/apple.svg. The SVG from the repository, in this case, looks like this:

<?xml version="1.0" encoding="utf-8"?>
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
    <path d="M1585 1215q-39 125-123 250-129 196-257 196-49 0-140-32-86-32-151-32-61 0-142 33-81 34-132 34-152 0-301-259-147-261-147-503 0-228 113-374 113-144 284-144 72 0 177 30 104 30 138 30 45 0 143-34 102-34 173-34 119 0 213 65 52 36 104 100-79 67-114 118-65 94-65 207 0 124 69 223t158 126zm-376-1173q0 61-29 136-30 75-93 138-54 54-108 72-37 11-104 17 3-149 78-257 74-107 250-148 1 3 2.5 11t2.5 11q0 4 .5 10t.5 10z"/>
</svg>

You will need to remove the XML tag and the dimension attributes (width and height) so you can embed them in your HTML documents:

<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
    <path d="M1585 1215q-39 125-123 250-129 196-257 196-49 0-140-32-86-32-151-32-61 0-142 33-81 34-132 34-152 0-301-259-147-261-147-503 0-228 113-374 113-144 284-144 72 0 177 30 104 30 138 30 45 0 143-34 102-34 173-34 119 0 213 65 52 36 104 100-79 67-114 118-65 94-65 207 0 124 69 223t158 126zm-376-1173q0 61-29 136-30 75-93 138-54 54-108 72-37 11-104 17 3-149 78-257 74-107 250-148 1 3 2.5 11t2.5 11q0 4 .5 10t.5 10z"/>
</svg>

The size of the icons, just as the color, will be adjusted later either through the inline style attribute or with a CSS class.

2. Adjusting icons behavior

You will need to align the SVG icons to your text in most of the case. This can be easily done using some CSS rules, however, they will be applied to a span element that will contain the SVG. The styles are the following ones:

.fa-svg-icon {
    display: inline-flex;
    align-self: center;
    /* 
        Define a global color for the icons 
        In this case black
    */
    fill: #000;
}
/*
    Define the size of the default icons
*/
.fa-svg-icon svg {
    height:1em;
    width:1em;
}

/*
    Positionate the SVG correctly
*/
.fa-svg-icon.svg-baseline svg {
    top: .125em;
    position: relative;
}

With those rules, we will define a default size for the icons which is initially 1em (parent's element's font-size) and default color. The svg-baseline class is a fix for the icon when you want it to align to your text properly.

3. Icons markup

Now that we have the styles, you can start to embed the Font Awesome SVG icons. The markup for a single icon looks like this:

<!-- Wrap Icon's SVG inside a span -->
<span class="fa-svg-icon svg-baseline">
    <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
        <path d="M1585 1215q-39 125-123 250-129 196-257 196-49 0-140-32-86-32-151-32-61 0-142 33-81 34-132 34-152 0-301-259-147-261-147-503 0-228 113-374 113-144 284-144 72 0 177 30 104 30 138 30 45 0 143-34 102-34 173-34 119 0 213 65 52 36 104 100-79 67-114 118-65 94-65 207 0 124 69 223t158 126zm-376-1173q0 61-29 136-30 75-93 138-54 54-108 72-37 11-104 17 3-149 78-257 74-107 250-148 1 3 2.5 11t2.5 11q0 4 .5 10t.5 10z"/>
    </svg>
</span>

As you can see, we simply wrap the SVG extracted from the first step inside a span that you can place wherever you want in the document. You can create some styles if you want to change their color or size whenever you need it or apply them with inline styles:

/*A twice as big icon */
.fa-2x svg{
    height:2em;
    width:2em;
}

/*Set the color of the icon to red*/
.fa-red{
  fill: red;
}

You can see a live example of some font awesome icons being loaded as SVG in the following fiddle:

Happy coding ❤️!