Create a Custom Open-Source Icon Font from Scratch

Blueprint CSS Bower Illustrator

Last updated Apr 25, 2016

If you're a web designer, you probably know that FontAwesome is, well, awesome. Alas, in 2016 it is probably the most overused design asset on the web. The best way to stand out in a sea of font awesome apps is to build your own icons from scratch. But don’t just build it for yourself, open source it for the rest of the world to use.

We are going to start the lesson by teaching you how to draw your own SVG-based icon font from scratch using Adobe Illustrator (or any other drawing program, like Sketch). Next, we are going convert the icons into font that is mapped to CSS classes. Finally, we are going to use Bower to create a NPM package that can easily be integrated into other apps using open-source technology. We shall call it FontAmazing.

Resources

Lesson Checkpoints

1. Drawing SVG Icons from Scratch with Adobe Illustrator

When developing an icon font, there are several best practices you should follow to avoid problems when mapping the images to a font. Let’s just list these out.

  1. Create a separate square artboard for each graphic, 64 x 64px is a good workable size.
  2. The final image must be 1 color as a solid fill. No strokes! Before exporting to SVG, you will need to click object >> expand appearance if you your graphic has any strokes.
  3. Make sure the image doesn’t have any paths that extend beyond the artboard.
  4. Convert text objects to outlines, then merge them to the icon. 

Create the Artboards

Our icon font is just going to have just 3 SVG graphics. Create a new illustrator file and configure it to use 3 artboards, each 64 by 64.

Merge the Shapes to Single Path

That should give us 3 artboards to work with. First were going to create a simple user icon. Use the ellipse tool to draw a couple of circles the somewhat resemble a human.

Next, we need to merge these overlapping shapes into a single path. Having multiple overlapping shapes will cause problems if we try to map this to a font. Use effects >> pathfinder >> merge to combine the two shapes into a single shape. You can also hit Shift+M to use the shape builder tool if you so choose. Always try to create single objects when creating icons - you never want to have stray text or strokes in your artwork. 

Repeat process and export to SVG

Go ahead and create two more icons using the same process. Now we have 3 icons that can be exported to individual SVG files. Whe can achieve this in one fell swoop by going to file >> export (making sure to select SVG format and check use artboards). That should give us 3 different SVG icons that will be mapped to a font in the next step. 

That concludes the drawing section of the lesson. Now its time to turn these icons into an open source font family.

2. Mapping the Icons to Font Files

Now we need to map our icons to a common font format, such as .woff, .ttf, .eot, or .woff2. There are several tools that make this process super easy. Check out Glyphter, Icomoon, and Fontastic to see which one is going to work best for you. They are all capable of doing what we need for this section of the lesson. Note: Icomoon is the only tool at this point that supports .woff2, which is the most optimized web font available, but its only available to premium members. 

What is a font file, exactly?

Fonts on the web are generally of the OpenType flavor, which is just a set of scalable digital shapes organized into a table. When we create our icon CSS, we will point each class to spot on this table that holds the appropiate icon. The apps in this section will help us build this table, or font file. 

Creating the our Font Files

We are going to use Glyphter. It’s free, easy to use, and built on ExpressJS. Simply drag and drop the icons into place, add it spits out our fonts and maps them to a CSS file. It also supports basic editing, which comes in really handy for certain types of icons. If you have arrow icons, you might need to rotate them in 8 different directions, which is a breeze with Glyphter. 

building fonts with glyphter

Just click export and you're done. Not much else to explain here.

3. Write a FontAwesome Style CSS Toolkit

Glyphter gives us a basic CSS class that will make our icon font work at this point, but it would be nice to have the more robust CSS toolkit like that of FontAwesome for changing sizes, spinning animations, etc. In order to add some of this functionality, we are going to create a new CSS file from scratch.

font-style.css


@font-face {
    font-family: 'FontAmazing';
    src: url('../fonts/Glyphter.eot');
    src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Glyphter.woff') format('woff'),
         url('../fonts/Glyphter.ttf') format('truetype'),
         url('../fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon:before {
  font-family: 'FontAmazing';
  display: inline-block;
  font: normal normal normal 14px/1 FontAmazing;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.icon-2x {
  font-size: 2em;
}

*/ Add additional styles from FontAwesome here  */

.icon-user:before{content:"\0041";}
.icon-filter:before{content:"\0042";}
.icon-eye:before{content:"\0043";}

So now we can just chain these extra classes together to modify the look of our font. For example, the icon-2x class will double the size of the icon. If you're familiar with font awesome, the .fa class is the equivlent to .icon class in this example. 

icons.html

<i class="fa fa-user fa-2x"></i> <!-- FontAwesome Version -->
<i class="icon icon-user icon-2x"></i> <!-- Our Custom Version -->

Check out the Font Awesome github repo for all the modifier classes that can be used with your icons.

4. Make an Open Source Bower Package for your Font

Now that you have made an amazing icon font, its time to share it with the open source community. We are going to package our font with Bower, which will allow other developers to easily use our font in their projects.

Dependencies

You will need NPM (Node Package Manager) and Git installed to continue from this point. From a command line, you will first need to make sure Bower is installed:

 $ npm install -g bower

Next, create a directory for your font, initialize git, and initialize Bower.

 $ mkdir font-amazing
$ cd fontamazing
$ git init
$ bower init

Bower is going to ask a few questions about the project. This is going to generate a JSON file with key information about your project. It is critical that this file is properly formatted before making your project publicly available.

 ? name fontamazing
? description an icon font sample lesson
? main file [ "css/fontamazing.css" ]
? what types of modules does this package expose? global
? keywords icon font
? authors Code Diode 
? license MIT
? homepage https://codediode.io
? set currently installed components as dependencies? No
? add commonly ignored files to ignore list? (Y/n) 

Next, you will need to set up a Git endpoint to host your code. Head over to Github and create a public repository for your project, then run the following commands:

 $ git add .
$ git commit -m "first commit"
$ git remote add origin path-to-your-repo
$ git push -u origin master

Lastly, you will need to register your package. There are a few rules you need to follow, so make sure to check out the bower registration guidelines.

 $ bower register path-to-your-repo

That’s it! You’ve created your own open-source icon font that will make the web a more interesting place.

Comments