README.md in fontcustom-1.3.8 vs README.md in fontcustom-2.0.0
- old
+ new
@@ -5,34 +5,48 @@
## Font Custom
**Icon fonts from the command line.**
Generate cross-browser icon fonts and supporting files (@font-face CSS, etc.)
-from a collection of SVGs
+from a collection of SVGs
([example](https://rawgit.com/FontCustom/fontcustom/master/spec/fixtures/example/example-preview.html)).
[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.
+Requires **Ruby 1.9.3+**, **WOFF2**, **FontForge** with Python scripting.
```sh
# On Mac
+brew tap bramstein/webfonttools
+brew update
+brew install woff2
+
brew install fontforge --with-python
brew install eot-utils
gem install fontcustom
# On Linux
-sudo apt-get install fontforge
+sudo apt-get install zlib1g-dev 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/
+git clone --recursive https://github.com/google/woff2.git && cd woff2 && make clean all && sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
gem install fontcustom
```
+####Note for windows:
+1. Install fontforge: http://fontforge.github.io/en-US/downloads/windows/
+- Install to a path without spaces, eg c:\FontForgeBuilds
+- At the end of the installer check the 'run fontforge' box. It finishes some set up.
+2. Add the installation path to your System PATH variable (c:\FontForgeBuilds\bin)
+3. Open up a new command prompt and test it. `fontforge -help`
+4. gem install fontcustom
+
+
### Quick Start
```sh
fontcustom compile my/vectors # Compiles icons into `fontcustom/`
fontcustom watch my/vectors # Compiles when vectors are changed/added/removed
@@ -64,15 +78,86 @@
Set `templates` to include `scss-rails` to generate a SCSS partial with the
compatible font-url() helper. You'll most likely also need to set
`preprocessor_path` as the relative path from your compiled CSS to your output
directory.
+**Example Use in Rails**
+
+Add `gem 'fontcustom'` to your gem file.
+```
+bundle
+```
+Create a `fontcustom.yml` file with something like this:
+```yml
+# config/fontcustom.yml
+
+font_name: icons
+css_selector: .icon-{{glyph}}
+preprocessor_path: ""
+autowidth: false
+no_hash: true
+force: false
+debug: false
+quiet: false
+
+input:
+ vectors: app/assets/icons
+
+output:
+ fonts: app/assets/fonts
+ css: app/assets/stylesheets
+
+templates:
+ - scss
+```
+
+This tells the gem to take the vectors from `app/assets/icons` and create fonts and stylesheets for them.
+
+Create a file in lib/tasks called `icons.rake` :
+
+```ruby
+namespace :icons do
+ task :compile do
+ puts "Compiling icons..."
+ puts %x(fontcustom compile)
+ end
+end
+```
+
+Load up the icons directory and test it out.
+
+Run this command with
+```sh
+rake icons:compile
+```
+
+This should run the installed and configured gem to create your icons:
+
+```sh
+Compiling icons...
+ create .fontcustom-manifest.json
+ create app/assets/fonts
+ create app/assets/fonts/icons.ttf
+ app/assets/fonts/icons.svg
+ app/assets/fonts/icons.woff
+ app/assets/fonts/icons.eot
+ create app/assets/stylesheets/_icons.scss
+```
+Access these new icons by creating a tag with the class `icon-{{glyph}}` where the {{glyph}} is the name of the svg you put in the icon folder.
+For example, if you added a file called 'cars54' icon would look something like this:
+
+```html
+<i class="icon-cars54"</i>
+```
+
+Now the font is adjustable to css 'font-size' and 'color'.
+
**Save CSS and fonts to different locations**
You can save generated fonts, CSS, and other files to different locations by
using `fontcustom.yml`. Font Custom can also read input vectors and templates
-from different places.
+from different places.
Just edit the `input` and `output` YAML hashes and their corresponding keys.
**Tweak font settings**
@@ -99,9 +184,10 @@
* `glyphs`: all selectors and their codepoint assignments (`.icon-example:before { content: "\f103"; }`)
* `@options`: a hash of options used during compilation
* `@manifest`: a hash of options, generated file paths, code points, and just about everything else Font Custom knows.
* `@font_path`: the path from CSS to font files (without an extension)
* `@font_path_alt`: if `preprocessor_path` was set, this is the modified path
+* `pseudo_element`: if `css3` was set to true, then it will print `::before`. Otherwise the PseudoElement will be `:before`
`font_face` accepts a hash that modifies the CSS url() function and the path of
the font files (`font_face(url: "font-url", path: @font_path_alt)`).
---