Fine-tuned icon fonts integration for Sass, Less and Stylus.
npm install iconfontsFine-tuned icon fonts integration for Sass, Less and Stylus. Features the following icon sets:
* Elusive
* FontAwesome
* Ionicons
* Foundation Icons General

Installation
------------
__Manual:__ Get the files you need over at /stylesheets/ and put it in your
project.
__Bower:__ Using bower makes files available via bower_components/iconfonts/stylesheets/.
$ bower install iconfonts
In your less/sass/styl files:
@include '../bower_components/iconfonts/stylesheets/ionicons';
__NPM:__ Using npm makes files available via node_modules/iconfonts/stylesheets/.
$ npm install iconfonts --save
In your less/sass/styl files:
@include '../node_modules/iconfonts/stylesheets/ionicons';
__Rails:__ Use rails-assets.org.
``ruby`
source 'https://rails-assets.org' do
gem 'rails-assets-iconfonts'
end
In your sass files:
`scss`
@import 'iconfonts/stylesheets/ionicons';

Why is it needed?
-----------------
This lets you use CSS definitions only for the icons you need, on the elements
that you need them.
The CSS files that these fonts provide usually give you a lot of cruft, and
defines all the classes in one giant file.
`css
/ CSS /
.fa-user:before { content: '\f007'; }
.fa-film:before { content: '\f008'; }
.fa-th-large:before { content: '\f009'; }
... and 300 more
/ HTML /
`
I prefer to not have them in my CSS files unless I need them. This project lets
you do that.
`css
/ Stylus /
.btn-plus:before {
fa-icon("plus");
margin-right: 10px;
}
/ HTML /
`
Setup
-----
#### SCSS (example)
` scss
@import 'font-awesome';
/ embeds the @font-face. use this only once. /
@include fa-font();
button:before {
@include fa-icon("music", 14px);
}
`
See a Sass file for more info.
#### SCSS on Rails without CDN's
Optional: If you're on Rails (with [sass-rails]), and prefer to keep the
files in your project, download the font files to vendor/assets/images/.xx-font-rails()
Afterwards, use instead of xx-font() to embed the
@font-face. Usage is otherwise the same as above.
` scss`
@import 'font-awesome';
@include fa-font-rails();
#### Stylus (example)
` sass
@require font-awesome
fa-font()
button:before
fa-icon("music", 14px)
`
See a stylus file for more info.
#### Less (example)
` less
@import 'font-awesome';
.fa-font();
button:before {
.fa-icon("music");
font-size: 14px;
}
`
See a less file for more info.
#### Less on Rails
If you're on Rails (with [less-rails]) and prefer to keep the files in your
project, download the font files to vendor/assets/images/. Afterwards, usexx-font-rails() instead of xx-font() to embed the @font-face. Usage is
otherwise the same as above.
` scss`
@import 'font-awesome';
.fa-font-rails();
[sass-rails]: https://github.com/rails/sass-rails
[less-rails]: https://github.com/metaskills/less-rails
#### PostCSS + cssnext + postcss-import
` css
@import 'iconfonts/stylesheets/font-awesome.cssnext.css';
@apply --fa-font;
button::before {
@apply --fa-icon;
@apply --fa-icon-music;
}
``
Iconfonts © 2014-2017, Rico Sta. Cruz. Released under the [MIT License].
Authored and maintained by Rico Sta. Cruz with help from [contributors].
> ricostacruz.com ·
> GitHub @rstacruz ·
> Twitter @rstacruz
[MIT License]: http://mit-license.org/
[contributors]: http://github.com/rstacruz/iconfonts/contributors