Here is a quick project setup and usage tutorial:
- Install font-icons
sudo gem install font-icons --pre
- Create a new bare bones compass project using the compass install instructions
compass create yourproject --bare --sass-dir "sass" --css-dir "css"
See here for other project creation options with Compass: http://compass-style.org/install/
- Go into the project directory "yourproject" and modify the config.rb to do the following:
- Require the font-icons extension
- Set the fonts_dir
- Set relative assets to TRUE by uncommenting that line
What the first few lines of your config.rb should look like..
# Require any additional compass plugins here.
require 'font-icons'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
fonts_dir = "css/fonts"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true-
In the directory root, create a simple html template for the test project (see font-icons-test.html gist below)
-
In the Sass folder, create a file called style.scss and enter the Sass needed to create an icon (see style.scss gist below)
-
Run the font-icons command for your required font. In this case, we will deploy the icon font set called 'Entypo', notice that the directory and fonts automatically get created.
$ compass install -r font-icons font-icons/Entypo
directory css/fonts/
create css/fonts/entypo.eot
create css/fonts/entypo.svg
create css/fonts/entypo.ttf
create css/fonts/entypo.woff
Sweet, FontIcons is now installed. You can start using the mixins in your sass project.
See the included example project for mixin usage.
- Compile your Stylesheets and open the html file in a browser to see the icon in action.
$ compass compile
You can pass parameters to the font-icon-base() mixin
// Defaults
@include font-icon-base($family:"iconic", $font-size: 1em, $width: 1em, $margin: 0.8em)
// Example
@include font-icon-base(entypo, 2em, 1em, 0.8em)In the above example, we only imported one font family.. via compass install -r font-icons font-icons/entypo This copies the actual font files you need into your project's css/fonts folder.
Alternatively, you can import all font families (currently only iconic and entypo) at once into your project using:
compass install -r font-icons font-icons
You can use multiple font families in the same HTML list (or to whatever piece of content you want), see the-alternate.scss
@todo modify the mixin to accept lists of fonts and create less css when multiple fonts are included.
Preview the icon first at: http://krisbulman.github.com/font-icons/
The placeholder names used to include the icons are as close as possible to the original projects with the exception of the font name in front to avoid name collisions.
The following locations will give you the icon placeholder name to @extend in your Sass:
- Font-icons project page http://krisbulman.github.com/font-icons/
- Example project in github https://github.com/krisbulman/font-icons/blob/master/example/example.html