{"action":"closed","issue":{"url":"https://api.github.com/repos/travelist/angular2-fontawesome/issues/18","repository_url":"https://api.github.com/repos/travelist/angular2-fontawesome","labels_url":"https://api.github.com/repos/travelist/angular2-fontawesome/issues/18/labels{/name}","comments_url":"https://api.github.com/repos/travelist/angular2-fontawesome/issues/18/comments","events_url":"https://api.github.com/repos/travelist/angular2-fontawesome/issues/18/events","html_url":"https://github.com/travelist/angular2-fontawesome/issues/18","id":177893923,"number":18,"title":"Trying to include component in RC5","user":{"login":"rbwilcoxon11","id":6274893,"avatar_url":"https://avatars.githubusercontent.com/u/6274893?v=3","gravatar_id":"","url":"https://api.github.com/users/rbwilcoxon11","html_url":"https://github.com/rbwilcoxon11","followers_url":"https://api.github.com/users/rbwilcoxon11/followers","following_url":"https://api.github.com/users/rbwilcoxon11/following{/other_user}","gists_url":"https://api.github.com/users/rbwilcoxon11/gists{/gist_id}","starred_url":"https://api.github.com/users/rbwilcoxon11/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rbwilcoxon11/subscriptions","organizations_url":"https://api.github.com/users/rbwilcoxon11/orgs","repos_url":"https://api.github.com/users/rbwilcoxon11/repos","events_url":"https://api.github.com/users/rbwilcoxon11/events{/privacy}","received_events_url":"https://api.github.com/users/rbwilcoxon11/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-09-19T20:49:16Z","updated_at":"2016-09-27T02:00:22Z","closed_at":"2016-09-27T02:00:22Z","body":"I was trying to follow the docs, but it seems that the \"directives\" attribute of the @Component decorator has been deprecated. So what I ended up doing was:\r\n\r\nI added the mapping and the package into a systemjs.config.js file.\r\n\r\n-I added the component into the root module \r\n```javascript\r\nimport { FaComponent } from 'angular2-fontawesome/components';\r\n...\r\n@NgModule({\r\n...\r\n  declarations: [\r\n    ...\r\n    FaComponent\r\n  ],\r\n...\r\n})\r\n```\r\n-I added font-awesome to the styleUrls of the component I want to add FA to\r\n```javascript\r\n@Component({\r\n  ...\r\n  styleUrls: [\r\n    ...\r\n    'node-modules/font-awesome/css/font-awesome.css'\r\n  ],\r\n})\r\n```\r\n-And I added the FA component to a html file, and put it in the templateUrl like so\r\n```javascript\r\n<div>\r\n  <fa [name]=\"'rocket'\"></fa>\r\n</div>\r\n```\r\n\r\nI am getting two issues when doing this...\r\n\r\n- First, the icon is getting zero size; likely caused by the _ngcontent qualifier placed on the fa tag and not on the i tag (see below)\r\n\r\n![zero-size-icon](https://cloud.githubusercontent.com/assets/6274893/18648398/1d675d0a-7e80-11e6-8969-e87f886ee5db.png)\r\n![font-awesome-excerpt](https://cloud.githubusercontent.com/assets/6274893/18648399/1d678050-7e80-11e6-9756-25d3a90ed614.png)\r\n\r\n-Second, when I manually add the _ngcontent qualifier to the i tag, it shows up as a corrupted character. This is caused by a 404 on the server; the css file is relatively qualified, and for some reason causes the path not to be \"/node_modules/font-awesome/fonts/...\", but \"/fonts/...\". This is probably a personal problem, though... (see below)\r\n\r\n![corrupted_icon](https://cloud.githubusercontent.com/assets/6274893/18648401/1d69cf90-7e80-11e6-872d-f1eff812efb1.png)\r\n\r\n![font-awesome-404](https://cloud.githubusercontent.com/assets/6274893/18648400/1d68aec6-7e80-11e6-94fb-2b2d6dbe5b47.png)\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"rbwilcoxon11"}}