I have recently decided to spice up my i3 status by adding icons to all of my info display sections. However, I also wanted to add an Arch icon in the front. This led me to an issue, as there are no icon fonts that I could find that have the arch icon included. So I decided to make my own icon font.
Getting the Arch icon svg
In order to create a custom icon you need to first have an
svg image of
SVG: an XML-based vector image format
The Arch svg that I am looking for can be downloaded from the
Repository. If you are on Arch, you just need to run:
1 pacaur -S archlinux-artwork
The Arch icons can now be found in:
You now have two choices for icons:
It is based on your preference but I choose the Crystal icon.
Generating the font
Now that you have the svg files, you can create the font with the program
1 2 3 fontforge ttfautohint Ruby1.9.x or greater
Now install fontcustom:
1 2 3 4 wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/ gem install fontcustom
Now generate the config and run fontcustom on the folder where your svg images
are stored. For me I stored my svgs in a folder called
svgImages. You can
also add the name of your font by editing the config. I named mine
IconicIcons (They are iconic!)
1 2 ~/svgimages/ fontcustom config ~/svgimages ~/svgimages/ fontcustom compile ~/svgimages --debug
Notice: Fontcustom is really sensitive to the file structure of your svg file. I have encountered many errors when trying to edit the output directory structure. It is best that you leave the structure to default. Also make sure you generate the config file in the directory that you are running fontcustom.
If all goes well, this will generate
.woff files under:
Now, after importing the css file and storing the font files in the proper place. You can use this font on you website by doing:
1 <i class="icon-arch"></i>
This will display the font. Yay!