raulghm / font-awesome-stylus

Stylus port for font-awesome 4.7.0

Font Awesome Stylus

Stylus Port for Font Awesome

Installation

Import font-awesome in your project and configure fonts path correctly ($fa-font-path)

Bower support

bower install font-awesome-stylus

NPM support

npm install font-awesome-stylus

Usage

Set font path

$fa-font-path = "../fonts"
// OR
$fa-font-path = "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts"

Example of requiring and using font-awesome middleware to create compile function to utilize in other frameworks.

var fontAwesome = require('font-awesome-stylus'),
    stylus      = require('stylus');

function compile(str) {
  return stylus(str)
    .use(fontAwesome());
}

To import whole font-awesome in your stylus file:

@import "font-awesome-stylus"

Include icon using mixin

.my-icon
  fa(user)

Original source

http://fortawesome.github.io/Font-Awesome

font-awesome-stylus's Issues

Error on path.styl when installing using bower

hi, i have exactly the same problem discussed on #20, with the package installed using bower. I've cleared the cache and reinstalled the package, but the problem persists.

I've seen the problematic line has been corrected, but the change is not present in the 4.3.0 tag (which is what bower installs)

17:59 $ bower install --save font-awesome-stylus
bower not-cached    git://github.com/raulghm/Font-Awesome-Stylus.git#*
bower resolve       git://github.com/raulghm/Font-Awesome-Stylus.git#*
bower not-cached    git://github.com/raulghm/Font-Awesome-Stylus.git#~4.3.0
bower resolve       git://github.com/raulghm/Font-Awesome-Stylus.git#~4.3.0
bower download      https://github.com/raulghm/Font-Awesome-Stylus/archive/v4.3.0.tar.gz
bower download      https://github.com/raulghm/Font-Awesome-Stylus/archive/v4.3.0.tar.gz
bower extract       font-awesome-stylus#~4.3.0 archive.tar.gz
bower mismatch      Version declared in the json (1.2.0) is different than the resolved one (4.3.0)
bower resolved      git://github.com/raulghm/Font-Awesome-Stylus.git#4.3.0
bower extract       font-awesome-stylus#* archive.tar.gz
bower mismatch      Version declared in the json (1.2.0) is different than the resolved one (4.3.0)
bower resolved      git://github.com/raulghm/Font-Awesome-Stylus.git#4.3.0
bower install       font-awesome-stylus#4.3.0

[Bug] Breaking change in minor-version release

There was a breaking change in one of your minor releases. I had version 4.6.2 installed, in which I was importing the stylus from here as @import 'font-awesome-stylus/stylus/index'. It seems like the file structure was changed around, which is a breaking change, so now my code doesn't work. This goes against semantic versioning's rules for back-compat breaking changes only being in major releases.

how to make it work with webpack

I'm importing the stylus like this:
my custom source/stylus.styl

@import '../node_modules/font-awesome-stylus/stylus/index.styl'
$fa-font-path = '../node_modules/font-awesome-stylus/fonts'

this is giving me error when loading fonts.

ERROR in ./~/css-loader!./~/stylus-loader!./source/styles.styl
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot in /Users/alexserver/dev/play/ractive-dropdown/source
 @ ./~/css-loader!./~/stylus-loader!./source/styles.styl 6:310-353

Any help ?

How do I use this with gulp?

How do I use this with gulp?

Update to 4.6.3

Hi,
Update to 4.6.3

Thanks

Need more specific examples in the docs

Example of requiring and using font-awesome middleware to create compile function to utilize in other frameworks

I'm sorry if this is a noob question - I'm a noob in this realm. I'm new to stylus and font-awesome. I'm playing around with https://github.com/vuejs/vue-hackernews-2.0 and it uses stylus in the components.

I'm not clear how to use this in a project. Here are some of my questions:

Is the $fa-font = ... in a certain stylus file, or all of them?

The same with the code var fontAwesome = ..., function compile(str) { .... Do I need this always or only in certain situations. And where do I put it?

And for the usage - the example is fa(user) - can I combine other properties like those at http://fontawesome.io/examples/#basic - eg fa(user rotate-90 2x)

a few full examples would really be helpful.

@import "path" commented out?

Why is @import "path" commented out in font-awesome.styl? Without it, the font-face is not compiled into the css.

Please update with 4.6 fa

Please update with 4.6 fa

Webpack loader complain, expected ":", got "."

I am trying to import to replace font-awesome scss

@import '~font-awesome-stylus'

ERROR in .//css-loader?sourceMap!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-fe272a96","scoped":false,"hasInlineConfig":false}!.//stylus-loader!./client/app/scss/App.styl
Module build failed: ParseError: expected ":", got "."
at Parser.error (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:259:11)
at Parser.expect (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:287:12)
at Parser.object (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2106:12)
at Parser.primary (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2165:21)
at Parser.member (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2070:21)
at Parser.subscript (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2048:21)
at Parser.unary (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2039:17)
at Parser.defined (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:2011:21)
at Parser.multiplicative (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1985:21)
at Parser.additive (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1970:21)
at Parser.range (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1954:21)
at Parser.relational (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1933:21)
at Parser.in (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1917:21)
at Parser.equality (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1902:23)
at Parser.typecheck (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1886:21)
at Parser.logical (/home/trevor/Projects/front-end/node_modules/stylus/lib/parser.js:1873:21)
@ .//vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-fe272a96","scoped":false,"hasInlineConfig":false}!./~/stylus-loader!./client/app/scss/App.styl 4:14-280 13:3-17:5 14:22-288
@ ./client/app/App.vue
@ ./client/app.js
@ ./client/index.js
@ multi ./build/dev-client ./client/index.js
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 26.5 kB 0
webpack: Failed to compile.

bower support

is it possible to add bower support?

Thanks

Example / gh-pages

Maybe you can use your /example directory in master to create a demo page, or move it to gh-pages branch. :)

extras.styl fails to compile

Reason: ParseError: extras.styl:21
   17| // Icon rotations & flipping
   18| // -------------------------
   19| 
   20| .{$fa-css-prefix}-rotate-90
 > 21|    @include fa-icon-rotate(90deg, 1)
   22| .{$fa-css-prefix}-rotate-180
   23|    @include fa-icon-rotate(180deg, 2)
   24| .{$fa-css-prefix}-rotate-270

expected "indent", got ","

Missing nib import

When I try to run gulp serve I get an error. Looks likes there is a reference to nib however there is no nib.styl or directory in the vendor package. I can comment it out and it works.

{ [Error: ~/myproject/node_modules/font-awesome-stylus/stylus/font-awesome.styl:6:9

6| @import "nib"

failed to locate @import file nib.styl

path.styl not compiling properly

Line 8 of path.styl:

url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), \

doesn't seem to compile properly and comes up as a missing resource when served.

Changing to:

url($fa-font-path + '/fontawesome-webfont.woff2?v=' + $fa-version) format('woff2'), \

works fine.

Is there something I'm missing?

Bower version number still at 1.2.0

Not sure if this is intentional but thought I'd mention it.

Change directory structure

Hi!
We can change directory structure to simplify font-awesome-stylus usage.

$ npm install font-awesome-stylus

Example of requiring and using font-awesome middleware to create compile function to utilize in other frameworks.

var fontAwesome = require('font-awesome-stylus'),
    stylus    = require('stylus');

function compile(str) {
  return stylus(str)
    .use(fontAwesome());
}

To import whole font-awesome in your stylus file:

@import "font-awesome"

---

We need change stylus folder name to font-awesome and add a simple index.js file with:

exports = module.exports = function () {
  return function(style){
    style.include(__dirname);
  }
}

And add "main": "index.js" on package.json.

Should bower version match original Font Awesome's version?

Current Font Awesome version == 4.2.0
Current Font Awesome Stylus version == 1.2.1

Why not match the version numbers?

TypeError: expected "undefined" to be a unit, but got ident:...

Hi guys.

Trying to use it with webpack. Importing this way:

@import '~font-awesome-stylus'

But webpack says:

ERROR in ../~/css-loader!../~/stylus-loader!./{projectPath}/styles/index.styl
    Module build failed: Error: {myPath}\node_modules\font-awesome-stylus\stylus\lis
t.styl:14:22
       10|     position relative
       11| 
       12| .{$fa-css-prefix}-li
       13|   position absolute
       14|   left -($fa-li-width)
    ----------------------------^
       15|   width $fa-li-width
       16|   top (2em / 14)
       17|   text-align center

    TypeError: expected "undefined" to be a unit, but got ident:$fa-li-width
        at ".$fa-css-prefix-li" ({myPath}\node_modules\font-awesome-stylus\stylus\li
st.styl:11:22)

Fixed with my own with the next steps:

1. font-awesome-stylus/stylus/list.styl
   line 14 was left -($fa-li-width) became left (-$fa-li-width)
2. font-awesome-stylus/stylus/list.styl
   line 20 was left -($fa-li-width) + (4em / 14) became left (-$fa-li-width) + (4em / 14)

But the CSS output is the next one:

.$fa-css-prefix {
  display: inline-block;
  font: normal normal normal $fa-font-size-base/$fa-line-height-base FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Please help.
Thanx in advance.

Use semver tags

Since this repo is a registered Bower package, would it be possible for you to start using semver git tags so that it's possible to peg a version in a bower.json file? For example, if you add a git tag of v0.1.0 to the most recent commit, it will allow a bower.json containing the following code to be valid:

{
  "dependencies": {
    "font-awesome-stylus": "~0.1.0"
  }
}

Usage instructions

I'm new to stylus and don't know how to "import index.styl" in my .styl files. I've tried @import "font-awesome-stylus" but webpack croaks saying it can't find it.