Issue integrating custom font (Font does not show)

[Ericky14]

I successfully was able to integrate and use font-awesome with this plugin, but I'm having trouble integrating a custom font from fontello. The font won't show.
Steps I took:

I put the ttl file in the fonts/ folder.
Called TNSFontIconModule.forRoot({ 'icon': './styles/ink-icons.css' });
Created this in app.css

.icon {
  font-family: 'ink-icons';
  font-size: 40;
  color: white;
}

And I used this element <Label class="icon" [text]="'icon-download' | fonticon"></Label>

I even turned on debugger and the mapping is mapping something at least it seems, but the terminal does not show the right icons.

Is it something wrong with the ttl or css files? It works for browsers, so I'm not sure it could be that.

[EddyVerbruggen]

Are you sure that ink-icons name in font-family: ink-icons is exactly the same as the name of the font? Double-click the ttf file, install it on your system, and make sure the name is not fontello for instance.

[Ericky14]

Yes, it installed under the name 'ink-icons' regular.

I just realized that if I do <Label class="icon" [text]="'\ue800'"></Label> instead of using the fonticon pipe, it works. Using the pipe nothing shows up.

[EddyVerbruggen]

Can you try something?

• Rename the icon class to ink
• Rename all.icon- classes in ink-icons to .ink-
• Use <Label class="ink" [text]="'ink-gplus' | fonticon"></Label>
• Update this: TNSFontIconModule.forRoot({ 'ink': './styles/ink-icons.css' });

[Ericky14]

I did all that, and the same thing happens. Switching 'ink-gplus' | fonticon for the code '\uf30f' works.

[EddyVerbruggen]

ok, perhaps it's a problem with fontello then.. my icomoon font works just fine..

[kamil-borecki]

@Ericky14 I dont know if you fixed your problem or not but i just had a similar problem. Check if in the font's css file is ':: before' or ': before'. In my case originally was :: i changed it to single : and anythink works fine for me :)

[closca]

@kamil-borecki do you have a working prototype?
Trying to integrate icon moon but is failing

[marklanhamhc]

Another thing to try is to make sure your font icon CSS code references use double quotes, not single.

LIKE THIS: .icon-alert:before { content: "\e801"; }
NOT THIS: .icon-alert:before { content: '\e801'; }

As this might conflict with the single quotes used in the text attribute, for example:

[text]="'icon-alert' | fonticon"