blog feed image

Making Icon Fonts

Mel Rush
29/08/14 - Mel

We've started using icon fonts as a way to display simple images that can be treated as fonts in our CSS.  These icons can be styled using the usual font attributes and crucially they stay sharp on high definition screens.   That means it’s quick and easy to change their size, weight and colour.

Stock libraries of icons are available from several sources.  Some of the best sites are: 

These are great for icons you might need all the time, like an envelope to indicate email or a trash can for ‘delete’.  Also available are the myriad of social media icons that are now used on most websites.

Custom Fonts

To make custom font icons and font sets we use the IcoMoon App.  It’s a straightforward process.  Just go to Import Icons and select your vector graphic files.

Vector Graphics

Scalable vector graphics or .svg files are files that don’t lose quality if they’re resized and can be printed at any resolution while retaining a high quality.   We use Illustrator to create them but a good open source option is inkscape.org.

Here’s how our designer makes our svg files:

In Photoshop:

  1. Create a vector image in black and white (white background, black icon)
  2. Remove the background
  3. Save as png

In Illustrator:

  1. Open the file that was created
  2. Go to the Artboard tool and in the Presets dropdown, select ‘Fit to artwork bounds’
  3. Go to main File menu and select Object > Image Trace > Make and Expand
  4.  In the Layers palette, expand the dropdowns, in the delete, the Empty and
  5. Go to File > Save As
  6.  Select ‘Save as Type’ SVG (*.SVG)

 

@font-face

When you’ve uploaded your svg file to IcoMoon you’ll see your icon appear at the top above the IcoMoon – Free options.  You can select it, and click Font at the bottom of the screen.

When you click Download on the next screen you get a kit containing the font files and a style sheet containing the @font-face properties you’ll need.  I usually copy these into my main CSS sheet.

Styling Custom Fonts

Css tricks has a good demo of what can be done with font icons.

Websites where we’ve used icon fonts

This website - in the menu

Courier Direct - circles under the slideshow

Westcountry Waterjet - rectangles below the slideshow

 

Somerset Design.

c/o Aardman Animation, Gas Ferry Road, Bristol BS1 6UN

Tel: 0117 214 0054

© 2024 A&M Consulting Ltd t/a Somerset Design. Registered in England and Wales. Company No. 4377058 VAT Reg. 803 6289 32 Site Info

Our site uses cookies to ensure that we give you the best experience. Find out how to manage your cookies or click accept all and continue using our site.