Icon fonts from the command line.
Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.) from a collection of SVGs.
Changelog
Bugs/Support
Contribute!
Requires Ruby 1.9.2+, FontForge with Python scripting.
# On Mac
brew install fontforge eot-utils
gem install fontcustom
# On Linux
sudo apt-get install fontforge
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
fontcustom compile path/to/vectors # Compiles icons into `fontcustom/`
fontcustom watch path/to/vectors # Compiles when vectors are changed/added/removed
fontcustom compile # Uses configuration file at `fontcustom.yml`
# or `config/fontcustom.yml`
fontcustom config # Generate a blank a configuration file
fontcustom help # See all options
To preserve options between compiles, create a configuration file with
fontcustom config
. This should live in the directory where you run
all fontcustom
commands. Each of the following has its own command
line flag (--css-selector
, etc.). Defaults values are shown.
Basics
project_root: (pwd) # Context for all relative paths
input: (project_root) # Where vectors and templates are located
output: (project_root)/(font name) # Where generated files will be saved
config: (pwd)/fontcustom.yml # Optional path to a configuration file
debug: false # Output raw messages from fontforge
quiet: false # Silence all messages except errors
# For more control over file locations, set
# input and output as hashes instead of strings
input:
vectors: path/to/vectors # required
templates: path/to/templates
output:
fonts: app/assets/fonts # required
css: app/assets/stylesheets
preview: app/views/styleguide
Fonts
font_name: fontcustom # Also sets the default output directory and
# the name of generated stock templates
no_hash: false # Don't add asset-busting hashes to font files
autowidth: false # Automatically size glyphs based on the width of
# their individual vectors
Templates
templates: [ css, preview ] # List of templates to generate alongside fonts
# Possible values: preview, css, scss, scss-rails
css_selector: .icon-{{glyph}} # CSS selector format (`{{glyph}}` is replaced)
preprocessor_path: "" # Font path used in CSS proprocessor templates
# Set to "" or false to use the bare font name
# Custom templates should live in the `input`
# or `input[:templates]` directory and be added
# to `templates` as their basename:
templates: [ preview, VectorIcons.less ]
Custom templates have access to @options
, @manifest
, and the following ERB helpers:
font_name
font_face
: FontSpring's Bulletproof @font-face syntaxglyph_selectors
: comma-separated list of all selectorsglyphs
: all selectors and their codepoint assignments (.icon-example:before { content: "\f103"; }
)
- All colors will be rendered identically โ including white fills.
- Make transparent colors solid. SVGs with transparency will be skipped.
- For greater precision, prefer fills to strokes (especially if your icon includes curves).
- Keep your icon within a square
viewBox
. Font Custom scales each SVG to fit a 512x512 canvas with a baseline at 448. - Setting
autowidth
to true trims horizontal white space from each glyph. This can be much easier than centering dozens of SVGs by hand.
To every glyph in the font is associated a ligature with the name of the svg file but the characters "-" or "_". To use the ligatures you have to set the class attribute of the HTML element with the css selector prefix and then write the glyph name into the element and it will be replace by the icon.
For example if my css_selector is .icon-{{glyph}}
and my svg glyph name is logo.svg
you have to
write the following code
<i class="icon">logo</i>