Font file has the benefit of containing plenty of vector graphics, thus scalable, if used as a single colour icon. Each character, outside the commonly used space, can represent an icon, which can be used as any text.
The following example commands are all done in a Unix based OS, due to the software dependency requirements. In this case Ubuntu Linux is used.
The following tools need to be available, thus installed in the given operating system.
sudo apt-get install fontforge
After downloading and uncompressing the
woff-code-latest.zip from the above Mozilla link, build and install it with the following commands:
cd woff-code-latest make sudo cp sfnt2woff /usr/local/bin/ sudo cp woff2sfnt /usr/local/bin/
Finally install fontcustom via Ruby Gems:
sudo gem install fontcustom
svg-files is the folder that contains all the SVG files:
fontcustom compile svg-files
Generate a default configuration file, called
fontcustom.yml, with a command:
The contents could look something similar to the snippet below:
font_name: fontcustom css_selector: .icon- preprocessor_path: "" autowidth: false no_hash: false force: false debug: false quiet: false
Make any changes needed, for example:
font_name: NipponBudoIcons css_selector: .budo-icon- preprocessor_path: "" autowidth: true no_hash: true force: true debug: true quiet: false
and then run simply with the following command with the configuration file in the current folder:
The different configuration options are explained at fontcustom GitHub page.
In case the source file would an Illustrator graphic, there is a plugin which allows exporting top level layers as individual SVG files, that are named according to the layer name.
The Illustrator extension for exporting SVG files used here is Layer Exporter.
Another thing to look as is the relative size of the given icons, as while they are scaled to fit the same area, there might be differences in the output. This can be handled by creating a transparent bounding box in Illustrator, for each icon separately, which is then used for determine the size of the resulting SVG files. Once the export is done and if the font is now created, all the icons look the same, a solid fill rectangle due to the bounding box. Therefore the bounding box needs to be removed from the SVG files once they have been created.
The given bounding box in SVG might look something like:
<rect id="bounding_box_36874" x="0" y="0" width="20" height="20"/>
A regular expression which can be used for finding all occurrences:
Further cleaning of the resulting SVG could be done with
svgo, but it is not demanded as the SVG files are just and intermediate format in this task.
svgo --folder=svg-files --pretty
On the other hand, specially if the resulting SVG seems messy, it might be worthwhile to run the above command before trying to remove the bounding box, but be aware that the type of it might change, from