Generate custom icon webfonts from the comfort of the command line.
Output multiple font formats and a bulletproof stylesheet with one command. Works on modern browsers, quirky mobile flavors, and even your old friend IE8.
Font Custom creates styles using Bootstrap's .icon-{{your-icon-name}} naming convention. Just include fontcustom.css and you're set.
No configuration or navigating confusing APIs. Just place all your vectors in a folder, link a CSS file, and let Font Custom take care of the rest.
Why limit yourself to generic, overused icon sets? Create your own vectors or check out Glyphicons and The Noun Project for a buffet of possibilities.
Resize icons to your heart's content. Since they're vector, Font Custom icons appear crisp at any size. (Also, no more @2x icon assets.)
Change colors, add shadows, rotate, transmogrify — style icons however you want with just a little CSS. Tweaking icon designs has never been easier.
Icon font sets like Pictos and Font Awesome require browsers to download hundreds of icons you'll never use. Font Custom only includes the icons you choose.
Some icon fonts use letters or alphanumeric characters which are read out by screen readers. Font Custom uses Unicode's PUA so this won't ever be an issue.
Add an icon? Remove an icon? Fonts and styles are regenerated instantly thanks to Font Custom's handy command line watcher.
Just create a directory for your svg files. Then, on the command line, run:
fontcustom watch /path/to/vectors
Font Custom will create the font files and accompanying CSS file. It will also continue to run and watch the folder for changes, so you don't have to manually re-run it each time you update the vector set.
Want to just run it once, without watching the folder?
fontcustom compile /path/to/vectors
Ready to start using Font Custom? You just need Ruby and RubyGems to get started.
To install on OS X using Homebrew simply run:
brew install fontforge eot-utils ttfautohint gem install fontcustom
On Linux? No problem*:
sudo apt-get install fontforge eot-utils ttfautohint 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
Note that if ttfautohint is not available in your distribution, Font Custom will still work but your generated font will not be properly hinted.
* On Debian and Ubuntu, you may need to install the ruby dev packages first: sudo apt-get install ruby1.*.*-dev.
Font Custom generates a number of files, including CSS and all font files as follows:
fontcustom.css fontcustom-UNIQUEHASH.ttf fontcustom-UNIQUEHASH.eot fontcustom-UNIQUEHASH.woff fontcustom-UNIQUEHASH.svg
The UNIQUEHASH is generated based on the filenames and sizes of all of the vector files. This way, when new font files are generated, the old font won’t be cached by the browser.
The CSS file contains Bootstrap-compatible boilerplate selectors and classes for each icon. The icon classes can be found at the bottom of the file, like this:
/*
Icon Classes
*/
.icon-graffiti:before { content: "\f000"; }
.icon-star:before { content: "\f001"; }
.icon-walk:before { content: "\f002"; }
.icon-windmill:before { content: "\f003"; }
First, include the CSS file (there are multiple ways to do this, of course).
<link href="path/to/fontcustom/fontcustom.css" rel="stylesheet">
To add an icon to a selector, simply add the class that corresponds to the vector's file name:
<span class="icon-sheep">Mary had a little lamb.</span>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#"><span class="icon-lightning"></span>Action</a></li> <li><a tabindex="-1" href="#"><span class="icon-pen"></span>Another action</a></li> <li><a tabindex="-1" href="#"><span class="icon-graffiti"></span>Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#"><span class="icon-star"></span>Separated link</a></li> </ul>
<div class="btn-group">
<a class="btn dropdown-toggle icon-lightning" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
<div class="btn-group">
<button class="btn btn-mini"><span class="icon-star"></span> Action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
<div class="btn-group"> <button class="btn"><span class="icon-scale"></span> 1</button> <button class="btn"><span class="icon-customize"></span> 2</button> <button class="btn"><span class="icon-pen"></span> 3</button> </div>
This project is licensed under the MIT License and © 2012 Yifei Zhang, Joshua Gross. You can find a copy of all of the licenses in the projects LICENSE.txt file.
This project was lovingly hand-crafted by Joshua Gross and Yifei Zhang in New York City.
You should follow us on Twitter, if that’s your thing:
Follow @endtwist
Follow @ezYZ