Fine-tuned icon fonts integration for Sass, Less and Stylus
CSS Smarty Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src Ionicons: move to jsdelivr CDN Oct 4, 2017
stylesheets do make all Sep 25, 2017
support do make all Sep 25, 2017
.gitignore Add support for ionicons@3 Oct 14, 2016
.travis.yml
History.md Release v0.12.0 Sep 25, 2017
Makefile Implement cssnext support Mar 12, 2017
Notes.md Release v0.3.0 Aug 4, 2014
Readme.md Release v0.11.0 Mar 12, 2017
bower.json Update fontawesome to 4.5.0 Feb 22, 2016
package.json Release v0.12.0 Sep 25, 2017

Readme.md

Icon fonts

Fine-tuned icon fonts integration for Sass, Less and Stylus. Features the following icon sets:

Status

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
  gem 'rails-assets-iconfonts'
end

In your sass files:

@import 'iconfonts/stylesheets/ionicons';

npm version

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 */
.fa-user:before { content: '\f007'; }
.fa-film:before { content: '\f008'; }
.fa-th-large:before { content: '\f009'; }
... and 300 more

/* HTML */
<button class="btn btn-plus"><i class="fa fa-plus"></i> Add user</button>

I prefer to not have them in my CSS files unless I need them. This project lets you do that.

/* Stylus */
.btn-plus:before {
  fa-icon("plus");
  margin-right: 10px;
}

/* HTML */
<button class="btn-plus">Add user</button>

Setup

SCSS (example)

@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/. Afterwards, use xx-font-rails() instead of xx-font() to embed the @font-face. Usage is otherwise the same as above.

@import 'font-awesome';
@include fa-font-rails();

Stylus (example)

@require font-awesome

fa-font()

button:before
  fa-icon("music", 14px)

See a stylus file for more info.

Less (example)

@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, use xx-font-rails() instead of xx-font() to embed the @font-face. Usage is otherwise the same as above.

@import 'font-awesome';
.fa-font-rails();

PostCSS + cssnext + postcss-import

@import 'iconfonts/stylesheets/font-awesome.cssnext.css';

@apply --fa-font;

button::before {
  @apply --fa-icon;
  @apply --fa-icon-music;
}

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