Chinese symbol instead of function or ionicon icon

Question

For some reason, I am getting Chinese symbols instead of the right icon. I have the .ttf in app/fonts directory and .css under /app. Hope that you will find my mistake

app.css

.fa {
    font-size: 60;
    font-family: FontAwesome, fontawesome-webfont;
}

.ion {
  font-family: Ionicons, ionicons;
  font-size: 60;
}

main.ts

import { TNSFontIconService } from 'nativescript-ng2-fonticon';

nativeScriptBootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(TranslateLoader, {
    useFactory: () => {
      return new TNSTranslateLoader('assets/i18n');
    }
  }),
  TranslateService,
  provide(TNSFontIconService, {
    useFactory: () => {
      return new TNSFontIconService({
        'fa': 'font-awesome.css',
        'ion': 'ionicons.css'
      });
    }
  })  
])

page.html

  <Button class="fa" [text]="'fa-bluetooth' | fonticon"></Button>
  <Label class="ion" [text]="'ion-flag' | fonticon"></Label>

page.ts

import { TNSFontIconService, TNSFontIconPipe } from 'nativescript-ng2-fonticon';
@Component({
  templateUrl: 'pages/pages/page.html',
  pipes: [TranslatePipe, TNSFontIconPipe]
})
export class Pages {
  constructor(private fonticon: TNSFontIconService,
              private translate: TranslateService) {}

Is your app on android or ios? That really matters – Dean Le Jun 03 '16 at 07:01 — Dean Le, Jun 03 '16 at 07:01

score 0 · Answer 1 · answered Jun 03 '16 at 10:05

0

In my opinion there is a problem with the setting the font-family property in your app.css file. When you download the custom font, you should set the same font file name to font-family without changing it.

I tested ionicons in a sample project and you can review it here in my github repo. In addition you could review this article: Icon Fonts

answered Jun 03 '16 at 10:05

Nikolay Tsonev

1,919
3
16
29

Hi Nikolay. I don't see you using nativescript-ng2-fonticon. I don't want to use the hex value, but instead the font name. It is clearer, I think. Would you mind to try it? – David Jun 03 '16 at 20:19

score 0 · Answer 2 · answered Jun 03 '16 at 15:14

In app.css, if you are implementing on android, then the font-family must be the same name of the .ttf file's name. For example, you have the font file which is fontAwesome.ttf then the CSS should be:

.some-cssClass{
   font-family: fontAwesome;
}

However if it's iOS, you have to make sure that font-family is using the name of the font. Double click to fontAwesome.tff, you will see the name of the font: "FontAwesome" (for example), then:

.some-cssClass {
   font-family: "FontAwesome";
}

Hope this could help you.

Like you can see in my sample code, my .fa class is using both. I even added the double quotes around FontAwesome, but did not change anything. — David, Jun 03 '16 at 20:15

score 0 · Answer 3 · answered Jun 04 '16 at 00:57

0

I finally found the issue.

I had app.css and app.android.css. All my settings for fonticon was in app.css. Because of the app.android.css, the "compiler" took the info from app.android.css instead!

answered Jun 04 '16 at 00:57

David

1,241
20
36

Chinese symbol instead of function or ionicon icon

3 Answers3