Using fonts for small icons in a website

Remember the time when you used to use images for all the small icons while building a website, but this of course would meant making a lot of http requests from the browser and thus slowing down the page.

And, that’s when we used sprites, a nice array of all the little icons on the website included in a single array which could be selectively shown using the CSS background-position property.

Now that we are in the twenty first century and kids these days are using all this technology (I know!) we will take this another step further and load all our icons as a type, so that each icon will just be a character in a certain font family.

Some Interesting Websites

There are some websites that have these community made icons you can include on your website. The most popular one being Font Awesome.

The following are some websites that allow you to add your own fonts to a set of Font Awesome or Fontelico icons:

  • Iconmoon: This website allows use of your own icons and also include font awesome icons
  • Fontello: Allows use of custom icons + Fontelico icons + Font awesome icons

What if I want to add icons I created myself ?

fontcustom is a tool that lets one create a font file from vectors locally (available for mac and linux).