https://github.com/glaszig/compass-fontcustom

Font Custom integration with Compass
https://github.com/glaszig/compass-fontcustom

compass css fontcustom ruby

Last synced: 23 days ago
JSON representation

Font Custom integration with Compass

• Host: GitHub
• URL: https://github.com/glaszig/compass-fontcustom
• Owner: glaszig
• License: mit
• Created: 2013-03-15T23:42:44.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2017-01-31T22:20:03.000Z (about 8 years ago)
• Last Synced: 2024-12-22T10:47:04.526Z (about 1 month ago)
• Topics: compass, css, fontcustom, ruby
• Language: Ruby
• Size: 105 KB
• Stars: 18
• Watchers: 4
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Compass::Fontcustom

[![Build Status](https://travis-ci.org/glaszig/compass-fontcustom.png?branch=master)](https://travis-ci.org/glaszig/compass-fontcustom)

[![Gem Version](https://badge.fury.io/rb/compass-fontcustom.png)](http://badge.fury.io/rb/compass-fontcustom)

[![Test Coverage](https://coveralls.io/repos/glaszig/compass-fontcustom/badge.png?branch=master)](https://coveralls.io/r/glaszig/compass-fontcustom)

This is my attempt of integrating [Font Custom](http://fontcustom.com) with [Compass](http://compass-style.org).

## Requirements

Tested on Ruby 2.0, 2.1, 2.2, 2.3 and 2.4.  

You'll need to have fontforge and the [WOFF font toolset](http://people.mozilla.com/~jkew/woff) installed as outlined in the Font Custom [installation instructions](http://fontcustom.com/#installation).

## Installation

Add this line to your application's Gemfile:

    gem 'compass-fontcustom'

or:

    gem 'compass-fontcustom', :github => 'glaszig/compass-fontcustom'

And then execute:

    $ bundle

## Configuration

Compass::Fontcustom adds the following configuration options to Compass.  

Just add these to your project's `config/compass.rb`.

- `fontcustom_input_paths`  

  Array of paths where to search for SVG files to build custom fonts from.

- `fontcustom_discard_manifest`  

  Boolean to configure to delete the manifest file after each run.

- `fontcustom_options`  

  A hash to pass native options to FontCustom.

## Usage

Syntactically it works like Compass' sprites feature.  

You can let Font Custom generate your fonts upon Compass' css compilation:

```css

@import "myfont/*.svg";

@include all-myfont-glyphs;

```

This will setup a proper `@font-face` and generate icon classes named `.icon--` for each glyph.

### Custom class names

You can also use custom class names using the `-glyph()` mixin:

```css

.custom-class-name {

  @include myfont-glyph(glyph-file-name);

}

```

which will result into CSS along the lines of:

```css

.myfont-font, .custom-class-name {

  font-family: "myfont";

}

.custom-class-name:before {

  content: "\f100";

}

```

> **Attention**  

> Generated CSS class names will be normalized and reserved characters removed.  

> That means if you have a glyph file name of `a_R3ally-eXotic f1Le+Name.svg` the generated class name will be `.icon-myfont-a_R3ally-eXotic-f1Le-Name`.

## Contributing

1. Fork it

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create new Pull Request

## License

[MIT](https://raw.github.com/glaszig/compass-fontcustom/master/LICENSE)