Use fonts for icons and make your website awesome

Web performance is really, really important.

Despite the ever increasing speed of internet connectivity, the experience users are getting through native apps is changing expectations; slow websites simply do not cut it any more. There are various studies and reports on the correlation between poor page speed and bounce rates, but the general guidance is that visitors are willing to wait just 2-3 seconds for a page to load before they abandon it (i.e. bounce to another site). Believe it or not, this is generally lower on mobile devices.

I'm going to be talking a lot about web performance in the coming months, but this article is about very simple, quick tip that will make a big difference to your site's speed .... swap your icon images for a CSS font.

Use of CSS fonts has several benefits:

  1. A font is a single, tiny request, compared to several relatively large requests for images. Even if you are using CSS sprites to reduce the request count, the sprite itself is still way bigger than a font file
  2. A font is fully scalable without quality degradation, which means it will look super crisp on those all important retina displays
  3. Using a font means you can have a consistent, high quality design for your icons
  4. Who wants to spend their time creating or searching for icon images?

There are lots of CSS-based fonts freely available, but my favourite is Font Awesome ( Font Awesome has 519 icons including social networks, credit cards, just about every type of arrow you can think of and even a rocket! You can easily adjust the size of the icon, add spinning animations, rotate, flip and stack them. Font Awesome uses the HTML <i> element with a range of CSS classes, simple as that - no JavaScript or images, just a font and some clever CSS.

To add font awesome to your project just run this in Package Manager Console:

Install-Package FontAwesome

Once the package is installed, you just need to reference the style sheet which will be in ~/Content/font-awesome.css by default.

You can then use the font by using <i> elements which the CSS for whichever icon you'd like. Here are some examples:

You can see more examples here


Comments (0)

Skip to main content