fa-stylus
Stylus port of Font Awesome 4.7, allowing icons to be selectively chosen or included all at once.
What's new?
- Added 47 new icons from Font Awesome 4.7
Installation
npm install fa-stylus --save
Initialization
fa-stylus
Set up compiler to use Use gulp, grunt, or similar and configure your stylus to include fa-stylus
in the use
option.
For example, with gulp:
var fontAwesomeStylus = ; gulp;
Then import fa-stylus
in your stylus file.
@import 'fa-stylus'
Configuration
The variables used by fa-stylus are set by the library only if not already set. That means to override them you must set them before importing fa-stylus.
See variables.styl
for full details.
Font path
The font path is set to ../fonts
by default,
but this may not be suitable for your project.
For example, if the fonts will be available at paths like /fonts/fontawesome-webfont.woff
,
it can be overridden with stylus code like the following:
$fa-font-path = '/fonts'@import 'fa-stylus'
The fonts can be moved to this location (usually public
or dist
)
as part of your build process;
for example with gulp you can do:
var filesToMove = './node_modules/fa-stylus/fonts/**/*.*'; gulp;
As alternative example, if you want the fonts in a subdirectory and your server follows symlinks, you can do:
cd dist/fonts
ln -s ../../node_modules/fa-stylus/fonts font-awesome
And then configure $fa-font-path = '/fonts/font-awesome'
in your stylus.
Usage
// Use individual icons.{$fa-css-prefix}-glass fa-icon 'glass' .{$fa-css-prefix}-music fa-icon 'music' // Or import a list of icons in a loop.{$fa-css-prefix} for $icon in bars bell android &-{$icon} fa-icon $icon // Or import all iconsimport-all-icons()
Test
npm install
gulp
Important notes
- The icon
500px
has been renamed toicon500px
, to work around a parse error caused by stylus interpreting it as 500 pixels.