9

I'm currently working on a project that had already been started using yeoman.

For some reason, when I run grunt-wiredep all dependencies are correclty injected in my index.html except for font-awesome.

Here's my bower.json file:

{
  "name": "watermelon",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-bootstrap": "~0.13.3",
    "angular-cookies": "^1.3.0",
    "angular-google-maps-native": "~2.0.0",
    "angular-mocks": "~1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-scenario": "~1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "^3.2.0",
    "bootstrap-switch": "~3.3.2",
    "eonasdan-bootstrap-datetimepicker": "~4.15.35",
    "es5-shim": "^4.0.0",
    "font-awesome": "~4.4.0",
    "json3": "^3.3.0",
    "moment": "~2.10.6",
    "ng-tags-input": "3.0.0",
    "requirejs": "latest",
    "requirejs-domready": "latest",
    "stacktrace-js": "~0.6.4",
    "underscore": "~1.8.3"
  },
  "appPath": "."
}

And a link to Gruntfile.js: http://pastebin.com/xxZwAYRW

When I run grunt-wiredep only these css dependencies get injected:

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" />
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" />
<!-- endbower -->

4 Answers 4

20

This problem broke with the latest(4.4.0) commit to FontAwesome.

The fix is pretty straight forward. You need to set an override (or maybe use less, but I am not going to cover that).

{
  "name": "myProject",
  "version": "0.0.0",
  "dependencies": {
    "font-awesome": ">=4.4.0",
  },  
  "overrides":{
    "font-awesome": {
    "main": [
        "css/font-awesome.css"
    ]
    }
  }
}

OR (because fontawesome/font-awesome has both names registered)

{
  "name": "myProject",
  "version": "0.0.0",
  "dependencies": {
    "fontawesome": ">=4.4.0",
  },  
  "overrides":{
    "fontawesome": {
    "main": [
        "css/font-awesome.css"
    ]
    }
  }
}
1
  • 3
    Thanks. Using this info I rolled back to 4.3 for now. Seemed easier.
    – Steve
    Commented Sep 29, 2015 at 19:04
8

You can do this by override bower package try this code i have edited your bower.json look for the change in bottom of this code.. hope it works

{
  "name": "watermelon",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "angular-animate": "^1.3.0",
    "angular-bootstrap": "~0.13.3",
    "angular-cookies": "^1.3.0",
    "angular-google-maps-native": "~2.0.0",
    "angular-mocks": "~1.3.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-sanitize": "^1.3.0",
    "angular-scenario": "~1.3.0",
    "angular-touch": "^1.3.0",
    "angular-ui-router": "~0.2.15",
    "bootstrap": "^3.2.0",
    "bootstrap-switch": "~3.3.2",
    "eonasdan-bootstrap-datetimepicker": "~4.15.35",
    "es5-shim": "^4.0.0",
    "font-awesome": "~4.4.0",
    "json3": "^3.3.0",
    "moment": "~2.10.6",
    "ng-tags-input": "3.0.0",
    "requirejs": "latest",
    "requirejs-domready": "latest",
    "stacktrace-js": "~0.6.4",
    "underscore": "~1.8.3"
  },  

"overrides":{
    "font-awesome": {
    "main": [
        "css/font-awesome.min.css"
    ]
    }
 }

}

3
  • 1
    I tried this but unfortunately it didn't work. I'd really like to know whether this is a known problem with font-awesome or not.
    – Tiago
    Commented Sep 7, 2015 at 15:33
  • 1
    I am pretty sure the problem here is that he is using font-awesome and not fontawesome. Check you bower.json font-awesom.min.css is the file name, but the project can be named either. just run bower search font-awesome
    – TMB
    Commented Sep 8, 2015 at 23:08
  • this same fix works for the issue with bootstrap too
    – Hashbrown
    Commented Jan 29, 2016 at 7:08
2
bower install components-font-awesome --save

should fix it.
It is mentioned on their Github page under Package Managers here

1
  • Just noticed that this fixes the issue for development using "grunt serve" will work but "grunt build" still misses the fonts on fonts folder, for that you need to add the entry on the Gruntfile.js to copy the fonts, just mimic boostrap fonts and should then work.
    – groo
    Commented Dec 21, 2016 at 7:39
0

Seems bower component "font-awesome" has some issues. You can try using instead "components-font-awesome" in your bower.json, it will solve the issue of not correctly injecting the css file. you can take a look in it's Github repo here: https://github.com/components/font-awesome

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.