travelist / angular2-fontawesome

Angular5 Components and Directives for Fontawesome

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Trying to include component in RC5

rbwilcoxon11 opened this issue · comments

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:

I added the mapping and the package into a systemjs.config.js file.

-I added the component into the root module

import { FaComponent } from 'angular2-fontawesome/components';
...
@NgModule({
...
  declarations: [
    ...
    FaComponent
  ],
...
})

-I added font-awesome to the styleUrls of the component I want to add FA to

@Component({
  ...
  styleUrls: [
    ...
    'node-modules/font-awesome/css/font-awesome.css'
  ],
})

-And I added the FA component to a html file, and put it in the templateUrl like so

<div>
  <fa [name]="'rocket'"></fa>
</div>

I am getting two issues when doing this...

  • 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)

zero-size-icon
font-awesome-excerpt

-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)

corrupted_icon

font-awesome-404