couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
Subject [21/39] couchdb commit: updated refs/heads/Update-Sidebar-Ui to 2cf2eab
Date Wed, 11 Jun 2014 12:56:37 GMT
Updated docs to reflect Fontcustom installation instructions for 1.3.3


Branch: refs/heads/Update-Sidebar-Ui
Commit: a4eb4551bc2ba0c472e42231c27eed8da2ee8acb
Parents: 072711b
Author: sean barclay <>
Authored: Tue Jun 10 07:27:00 2014 -0700
Committer: sean barclay <>
Committed: Tue Jun 10 07:27:00 2014 -0700

 src/fauxton/assets/icons/ | 137 +++++++++++++++++++++++++-------
 1 file changed, 109 insertions(+), 28 deletions(-)
diff --git a/src/fauxton/assets/icons/ b/src/fauxton/assets/icons/
index d83fd1b..75f1acc 100644
--- a/src/fauxton/assets/icons/
+++ b/src/fauxton/assets/icons/
@@ -1,39 +1,120 @@
 *WARNING:  this is a temporary solution for adding icons to the Icon Font. This will become
a grunt task eventually.*
-###Install Fontcustom
+[![Gem Version](](
+[![Build Status](](
+[![Code Quality](](
+## Font Custom
+**Icon fonts from the command line.**
-`brew install fontforge ttfautohint
-gem install fontcustom`
+Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.) from a collection
of SVGs.
-`sudo apt-get install fontforge ttfautohint
-unzip -d sfnt2woff && cd sfnt2woff && make &&
sudo mv sfnt2woff /usr/local/bin/
-gem install fontcustom`
-cd into the icons folder in Fauxton.
-Run it once.  Doesn't seem like we need to set it on watch
+### Installation
-`fontcustom compile /path/to/vectors`
+Requires **Ruby 1.9.2+**, **FontForge** with Python scripting.
+# On Mac
+brew install fontforge eot-utils
+gem install fontcustom
-You need to copy the fonts generated in the icons/fontcustom folder over to the style/assets/img
folder in addons.
-Then copy and paste the CSS generated into the icons.less file in the style/assets/less 
-Update the @font-face paths to have this prefix ../img
-open one of the existing icons, hide it, and paste your new icon in there. Resize it to fit
that space and center it vertically and horizontally.This helps prevent sTUff LiKE thIS fROm
+# On Linux
+sudo apt-get install fontforge
+unzip -d sfnt2woff && cd sfnt2woff && make &&
sudo mv sfnt2woff /usr/local/bin/
+gem install fontcustom
+### Quick Start
+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
+### Configuration
+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.
+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
+  vectors: path/to/vectors            # required
+  templates: path/to/templates
+  fonts: app/assets/fonts             # required
+  css: app/assets/stylesheets
+  preview: app/views/styleguide
+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: [ 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 syntax](
+* `glyph_selectors`: comma-separated list of all selectors
+* `glyphs`: all selectors and their codepoint assignments (`.icon-example:before { content:
"\f103"; }`)
+### SVG Guidelines
+* 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
+  than centering dozens of SVGs by hand.
+Brought to you by [@endtwist]( and [@ezYZ](

View raw message