Using Icon Fonts on Your Website – Part 2

In Part 1 we learned about the advantages of using an icon font and how easy it is to set one up on your website.

Whilst there are many pre-made sets of free and paid icon fonts available to use on your website, sometimes they don’t quite suit your branding or they’re missing a few more specific icons.

Thankfully, it’s really easy to make your own icon font, with the help of a tool such as Fontello (www.fontello.com).

Our tips on how to use icon font

First, you’ll need to create your icons and save them into SVG format using software such as Sketch or Abode Illustrator. If you’re not confident using these tools there are plenty of helpful tutorials online that you could use, or many SVG icons you can download to convert into a font.

Next, open Fontello (www.fontello.com) in your browser. You’ll see at the top a section titled ‘Custom Icons’. Find your icons in your file browser can drag and drop them into this section of the site.

Once the files have been dragged and dropped, you’ll see examples of your icon appear as mini versions in a grid.

Next, you’ll need to select all of your icons by clicking on them. They’ll have a red outline when selected and the counter with increase.

Now you’re ready to download your webfont! Give your font a name on the top right hand side of the page, and click the big red ‘Download webfont’ button. You can then download a zip file of your font files.

After you’ve downloaded the font zip, you’ll need to unzip the file and you should see a file structure similar to below.

You’ll need to take all of the font files in the ‘font’ folder and put when into your website folder structure.

Next, take the ‘my-font.css’ (or whatever you called your font) CSS file and include it in your CSS section of your website folder structure.

You’ll need to make sure that you include the CSS file in your website, like shown in Part 1, and that the CSS references the fonts files in the correct location.

To use your icons, open the CSS file and scroll to the bottom to see the classes that you should add to the <i></i> elements.

And it’s as simple as that! If the pre-made icon sets aren’t for you, it’s really easy for you to make your own set!

If you are interested in learning more about what our web development services can do for your business, contact our solutions team now 020 3813 5351.