A388

Cleanly Optimize and Embed Font Awesome in Your Website

This is a sort of a follow up to the Website Font Optimization post I wrote a while back, but it would still be beneficial because sometimes I forget how to properly embed Font Awesome (or any font) in a website even though I've done it correctly before.

I was embedding Font Awesome in a new project I'm working on and I started messing around with CSS rules to get the glyphs to actually display and I was thinking to myself that there should be an easier way to do this. Turns out there is, and I was using that on a different project that I happened to update over the last couple of days and it reminded me how to do it properly.

Follow the instructions from the Website Font Optimization post to get your final WOFF2 font. Base64 encode and embed it into your CSS if you want to, I usually do. Here's the crucial step. By default you would use Font Awesome by writing this: <i class="fa fa-font-awesome-flag"></i>, and you still can with my method, except you would copy the glyph into the content of the <i> tag like: <i class="fa"></i>.

When you read this, it will probably show as a blank space, but the glyph is actually there. Then in your CSS, you would simply write a rule for .fa to have font-family: FontAwesome. This way you don't have to mess around with ::before or ::after rules to fill in the glyph since you're bypassing the usual way to use Font Awesome.

Make sure that when you're optimizing your font that you update the character code because if IcoMoon doesn't recognize it it will generate a new one and the glyphs will not show up. I usually just go into the icon details on Font Awesome's website and copy the code from there. I also use the IcoMoon pre-download page to copy the glyphs out. Here's a more complete example of how I do it.

CSS

@font-face {
    font-family: FontAwesome;
    font-display: swap;
    src: url("data:font/woff2;base64,...base64_encoded_font...");
}

.fa {
    font-family: FontAwesome;
    font-style: normal;
}

HTML

<a>
    <i class="fa"></i>
    <span>Font Awesome is awesome!</span>
</a>

Hope this helps you, and if nothing else, it will help me to remember in the future how to do it easily.