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)`). ---