Web fonts are increasingly a popular way to add icons to your website. This blog post covers using fonts for icons on your website.
Icons are great visual aids. Well-chosen icons can make your site or web application more engaging and easier to navigate.
How to add icons to your website
In the past, icons have been implemented in two ways:
-
Individual graphics. This has the downside of requiring a new HTTP request per icon – the more icons you have, the greater the problem.
-
Sprites. You place all the icons in a single image – known as a sprite sheet – then use CSS to render a part of that image.
There’s no doubt that sprites are great – you can store icons, buttons and other UI elements – but what happens when you need to change the design? And what about high resolution devices?
There’s a new approach: turning your icon graphics into a font, and letting CSS take care of the rest.
Advantages of using web fonts
-
The icons are vectors, so can be used at any size! Great for responsive design and high PPI screens (iPhones, iPads, Nexus, etc.)
-
No need to break out Photoshop – add shadows and gradients with CSS.
-
Smaller file size than raster images, so your site loads faster! Even the slightest increase in speed is good for SEO, too.
Disadvantages of using web fonts
-
The CSS methods used to implement these icons – font-face, :before and :after – are not fully supported on all mobile browsers.
-
You can only display icons in monochrome, but if you keep reading we’ll show you that they can stand out.
Your next step
If you already have SVG graphics and want to generate a font from them, read on – we’ve created a list of services that can help. They all have a selection of icons to choose from, too.
If you’d rather hit the ground running with a fresh set of icons, skip on to our section on Font Awesome. We’ve put their icons to use with live examples!
Iconvault
You can create a custom font set with a selection of ready-made icons or upload your own vectors. It will create all the necessary files (woff, ttf, eot and svg) for you.
It’s a complete online service, just visit the Iconvault website to start making icon sets.
Fontello
This is a very complete online service. Choose your set from a vast collection of icons, edit their names and even their codes.
It will generate the font set, all the necessary CSS and a demo page for you to use as a reference.
IcoMoon
Create font-face sets from a selection of available icon sets or import your own vectors. This is a freemium service with extra features such as CDN storage and cloud syncing
Visit their website to review the icon packs and services plans.
Font Awesome
Go to Font Aswesome’s website and visit the ‘get started’ page and choose how to implement the font. The easiest way is use their CDN to store the font, you only need to include the link on the head of your HTML:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Creating Social icons with web fonts
In the past few years social networking has become an important tool, in consequence most of the websites include links to their pages in the most popular networks.
Font Awesome contains icons for almost every social network out there.
In this example we show you how quickly you can change the feel and look of these icons with just a couple of lines of CSS code.
Using web fonts to add icons to buttons
Action buttons can be more easy to understood if they contain icons. You can even replace the text with just the icon for actions like edit or delete.
Adding icons to menus
You can use web fonts to make menus more attractive with icons. Each icon could represent a sections or action.
These are just a few examples of the many uses for Font Awesome.
More information and credits
-
Utilizar tipos de iconos o webfonts en lugar de imágenes con HTML y CSS: Font Awesome y efectos 3D (Spanish)
You can fork these examples on Github
This article was written for Lightflows Creative agency and you can read it here