README.md in fontcustom-1.3.0.beta vs README.md in fontcustom-1.3.0.beta2
- old
+ new
@@ -4,16 +4,14 @@
## Font Custom
**Icon fonts from the command line.**
-Generate cross-browser compatible icon fonts and supporting files (e.g.
-@font-face CSS) from a collection of SVGs.
+Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.) from a collection of SVGs.
-[Documentation](http://fontcustom.com)<br/>
-[Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)<br/>
-[Support](https://github.com/FontCustom/fontcustom/issues)<br/>
+[Changelog](https://github.com/FontCustom/fontcustom/blob/master/CHANGELOG.md)<br>
+[Bugs/Support](https://github.com/FontCustom/fontcustom/issues)<br>
[Contribute!](https://github.com/FontCustom/fontcustom/blob/master/CONTRIBUTING.md)
### Installation
Requires **Ruby 1.9.2+**, **FontForge** with Python scripting.
@@ -33,43 +31,41 @@
### Quick Start
```sh
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 options from `fontcustom.yml`
-fontcustom watch
-
+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 plan on
-running `fontcustom` commands.
+running `fontcustom` commands. Most of the following can also be used as
+command line flags (`--css-selector`, etc.).
```yml
-# General Options (defaults shown)
+# (defaults shown)
font_name: fontcustom # Names the font and sets the name and directory
# of generated files
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
templates: [ css, preview ] # Templates to generate alongside fonts
- # Possible values: preview, css, scss,
- # scss-rails, bootstrap, bootstrap-scss,
- # bootstrap-ie7, bootstrap-ie7-scss
-css_prefix: icon- # CSS class prefix
-no_hash: false # Don't add asset-busting hashes
-preprocessor_path: "" # Font path used in CSS proprocessor templates
+ # Possible values: preview, css, scss, scss-rails
+css_selector: .icon-{{glyph}} # Template for CSS classes
+ 6
+preprocessor_path: "" # Font path used in proprocessor templates (Sass, etc.)
+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
debug: false # Output raw messages from fontforge
-quiet: false # Silence all output messages
+quiet: false # Silence all messages except errors
# For more control over file locations,
# set input and output as Yaml hashes
input:
vectors: path/to/vectors # required
@@ -77,24 +73,21 @@
output:
fonts: app/assets/fonts # required
css: app/assets/stylesheets
preview: app/views/styleguide
- custom-template.yml: custom/path
+ 6
```
-### SVG Recommendations
+### SVG Guidelines
-All vectors are imported as a single layer with colors and strokes ignored. If
-you run into trouble, try combining your paths and ensuring that you don't have
-any white fills (which show up as colored).
-
-By default, Font Custom scales each vector to fit a 512x512 canvas with a
-baseline at 448. In practice, that means as long as your SVG `viewBox` is
-square, icons will look exactly like your SVGs.
-
-If you set the `autowidth` option, Font Custom will trim the widths of each
-glyph to the vector width. Heights are unaffected.
+* 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.
---
[Licenses](https://github.com/FontCustom/fontcustom/blob/master/LICENSES.txt)