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!
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.
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
brew install ttfautohint fontforge --with-python
sudo apt-get install ttfautohint fontforge
- Download and install ttfautohint.
- Download and install FontForge.
- 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.
Now you know how to build your own version of Genericons. If you have any questions or suggestions, please leave a comment below!