How to use custom icon fonts? - css

Question

I'm creating a cross-platform application with Nativescript and Angular.
I had a custom font icon that I want to use. I had some svg files that I turned into a ttf file. When I use the chars with their unicode code it shows nothing.
What I've done is this:
Put the ttf file on /src/fonts/icomoon.ttf (the same level of app)
Insert this code on app.css file
.ico {
font-family: icomoon, icomoon;
font-weight: normal;
}
In the home.component.html file I'm using it like this:
<!-- other stuff -->
<Label row="0" col="1" text="&#E904;" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
Where am I wrong? Did I miss something?
P.S.: the unicode codes go from e900 to e907
P.P.S: I've already used Fontawesome and it works with this code. Now I want to use my own font and this code doesn't work.
EDIT
I use this guide and I modified something.
In home.component.html file I have:
<Label row="0" col="1" [text]="'ico-link' | fonticon" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
I addedd the file app/assets/icomoon.css in which I put this:
font-family: 'icomoon';
src: url('../../fonts/icomoon');
src: url('../../fonts/icomoon') format('embedded-opentype'), url('../../fonts/icomoon') format('woff2'), url('../../fonts/icomoon') format('woff'), url('../../fonts/icomoon') format('truetype'), url('../../fonts/icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.ico {
display: inline-block;
font: normal normal normal 14px/1 icomoon;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ico-link:before {
content: "\ue904";
}
and in app.ts I added:
#NgModule({
bootstrap: [
AppComponent
],
imports: [
//...
TNSFontIconModule.forRoot({
'ico': './assets/icomoon.css'
})
]
//...
});
After all this it still doesn't work. The icon isn't show.

Answer 1

I have updated your playground here. It is working fine now.
In your html I am binding text like this.
<Label textWrap="true" text="{{iconmoonLbl}}" class="ico"></Label>
and in the .ts file I am using String.fromCharcode
this.iconmoonLbl = String.fromCharCode(0xe904);//'&#E904;'

Answer 2

I had the same issue, I notice that it is required to use the whole format , then I moved to that awesome icon plugin.
Try
<Label row="0" col="1" text="" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />
Also, remember that Android and IOs handle naming different, please check with using the new docs.
Note: In iOS your font file should be named exactly as the font name. If you have any doubts about the original font name, use the Font Book app to get the original font name.
Icon Fonts Nativescript/Angular