Icon fonts
Fine-tuned icon fonts integration for Sass, Less and Stylus. Features the following icon sets:
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.
source 'https://rails-assets.org' do end
In your sass files:
;
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 *//* HTML */<//
I prefer to not have them in my CSS files unless I need them. This project lets you do that.
/* Stylus */ /* HTML */</
Setup
example)
SCSS (;/* embeds the @font-face. use this only once. */button:before
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/
.
Afterwards, use xx-font-rails()
instead of xx-font()
to embed the
@font-face. Usage is otherwise the same as above.
;
example)
Stylus (@
See a stylus file for more info.
example)
Less ('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, use
xx-font-rails()
instead of xx-font()
to embed the @font-face. Usage is
otherwise the same as above.
;.fa-font-rails();
cssnext + postcss-import
PostCSS +;@
Thanks
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