Search code examples
cssfontsnativescriptnativescript-angular

How to use custom icon fonts?

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:

  1. Put the ttf file on /src/fonts/icomoon.ttf (the same level of app)

  2. 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.

Solution

  • 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;'

    enter image description here