In our website you may have noticed the icons dotted around to represent our main services. We’ve achieved this by creating an icon font and decided to offer this font to download for free.
What on earth is an icon font?
So we all know what icons are. An icon font is basically the same as a font such as ‘Times New Roman’ but made up of a limited set of icons/symbols instead of letters.
What’s wrong with just using images?
Well, nothing really… but an icon font has several advantages. It is made up of a special image type called a scalable vector graphic (svg) which means you can make it any size without it pixelating. This is perfect for icons as you want them to look sharp and neat. Having a font also makes it very easy to customise through CSS as you can do anything you normally can to a font; change the size, spacing, colour, line-height etc.
OK, so how do I use this icon font?
Download the font and add the font to your site in the following way (this may change depending on what website platform you’re using).
- Unzip the file and upload the contents onto your website – I’d recommend adding them to a folder called fonts.
- Add the following line to the top of your css:@import url(“/fonts/f8-icon-font-v1-1/style.css”);where ‘/fonts/‘ is the path of the fonts folder we created in step 1, relative to your stylesheet
- Now that the font is installed in your site you can use it by adding this html anywhere you want an icon.<i class=”icon-sketchbook custom-pack-icon“></i>Replace icon-sketchbook with a code to get the icon you want.
- Need any more help? Get in touch and we’ll be happy to help.
Icons can be a great way to add interest and extra recognisable elements to your brand, that you can use on any digital and web material. They are like little logos for sub-brands or sections of your business.
Why not get us to design and create you your own on-brand icon font? Get in touch!
