Font Awesome page load speed vs. css image?

Question

I want to know which one is faster. Using the font awesome to call the icon is faster or using css url to call the icon?

Answer 1

Font . If you are using the same Font Awesome as me, it is faster to use them as a font, instead of an image. The font is there as a collection of icons which you can use just by inserting a class to an element, or setting up a pseudo class to a class and inserting the icon you want in content .

HTML:

<i class="fa fa-search"></i>

CSS:

.element:before { content: "\f002"; }

Using the background property you have to insert an image url which means you either have to have multiple images in your folder taking up space and finding each and every one, or you have one image and you have to set your background-position for each icon.