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:

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

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

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./xxZwAYRW

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

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

• javascript
• bower
• font-awesome
• grunt-wiredep

4 Answers 4

This problem broke with the latest(4.4.0) mit 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"
    ]
    }
  }
}

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"
    ]
    }
 }

}

bower install ponents-font-awesome --save

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

Seems bower ponent "font-awesome" has some issues. You can try using instead "ponents-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./ponents/font-awesome