How to use custom icon fonts?

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.

Have you tried this? [How to import a new font into a project - Angular 5](https://stackoverflow.com/questions/49878988/how-to-import-a-new-font-into-a-project-angular-5) — Wojciech X, Jun 11 '19 at 15:21
Do you have `src` folder at root level? If yes, you are suppose to place the fonts inside root (src) folder. Also make sure you are using the postscript name of the font, it's mandatory use the postscript name on iOS. — Manoj, Jun 11 '19 at 15:27
Sorry, I'm wrong. I have the fonts folder under `src`, at the same level of `app`. I edit the question — gsarme, Jun 11 '19 at 15:31
@WojciechX No, I don't know if I can use that. It seems that is another type of project — gsarme, Jun 11 '19 at 15:33
@Manoj the name of the file and the postscript name are the same `icomoon` — gsarme, Jun 11 '19 at 15:34
@Manoj I don't think its's exactly the same because the fonts folder isn't at the same level of the app folder, but it is what I've done. I think the playgroud gives some errors but I haven't much time to resolve. Here is the [Playground](https://play.nativescript.org/?template=play-ng&id=umrWOB&v=2) — gsarme, Jun 11 '19 at 15:51
Possible duplicate of [Nativescript using custom icons on NavigationButton](https://stackoverflow.com/questions/44360804/nativescript-using-custom-icons-on-navigationbutton) — Narendra, Jun 11 '19 at 22:50
@Narendra in that issue they're using Fontawesome. I want to use my personal icon font. — gsarme, Jun 13 '19 at 08:29
@Narendra I edited the question, maybe you can understand better. — gsarme, Jun 13 '19 at 08:43

score 4 · Accepted Answer · answered Jun 13 '19 at 23:08

4

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

answered Jun 13 '19 at 23:08

Narendra

4,514
2
21
38

Thanks for sharing! I needed this solution – Przemo Oct 16 '19 at 09:38

score 0 · Answer 2 · answered Jun 01 '20 at 20:44

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="&#xe924;" 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

How to use custom icon fonts?

2 Answers2