Building your own version of Genericons

Preface

When building this website, I ran into an issue: Genericons, the font used to render the social logos in the sidebar, does not include an UpWork logo!

Sidebar with UpWork logo missing.
Oh no! There’s no UpWork logo 🙁

To get the sidebar rendering properly, I needed to build my own version of Genericons with an UpWork logo. Just in case you find yourself in a similar situation, I’ve described the process below.

Getting Started

In this post, I demonstrate how to build a custom version of the Genericons icon font with Genericons Grunt. The process involves installing some dependencies, cloning a git repo, and running a couple of commands. Let’s get started!

Step 1: Install ttfautohint and fontforge

Genericons Grunt uses FontForge as a font rendering engine. It also depends on ttfautohint for hinting. The first thing we need to do is install these dependencies.

OS X

brew install ttfautohint fontforge --with-python

Linux

sudo apt-get install ttfautohint fontforge

Windows

  1. Download and install ttfautohint.
  2. Download and install FontForge.
  3. Add C:\Program Files (x86)\FontForgeBuilds\bin to your PATH environment variable.

Step 2: Clone genericons-grunt

Now the fun part starts!

First, let’s clone the Genericons Grunt repo and cd into it.

git clone https://github.com/bporcelli/genericons-grunt.git
cd genericons-grunt

Step 3: Choose your icons

Next, we’ll choose the icons for our version of Genericons. This is as easy as adding, editing, or removing SVG source files from the svg directory. In my case, I’m going to drop in this UpWork logo.

Note that icons you add should be aligned on a 16×16 px pixel grid for the best results.

Step 4: Bake the font!

Finally, we get to build our icon font! It’s as easy as running two commands:

npm install
npm run build

If all goes well, the genericons directory will now contain your customized Genericons font.

Note for Windows users

You may encounter a build error when running npm install. If so, install Visual Studio 2015 and try again.

Conclusion

Now you know how to build your own version of Genericons. If you have any questions or suggestions, please leave a comment below!

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *