Using Icon Fonts on Your Website – Part 2

5 Laura Robson

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).

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.

1 - Create image

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.

2 - Fontello

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

3 - Icon upload

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.

4 - Select icon

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.

5 - Font download

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

6 - Files

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!