NathanWalker / nativescript-ngx-fonticon

Use custom font icon collections seamlessly with NativeScript + Angular.
MIT License
76 stars 39 forks source link

Chineese symbol instead of fonticon or ionicon icon #2

Closed icarus31 closed 7 years ago

icarus31 commented 8 years ago

For some reason, I am getting Chineese 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) {}
NathanWalker commented 8 years ago

Hi @icarus31 do you have a github project you could share where I could run this and take a look for you?

icarus31 commented 8 years ago

Hi @NathanWalker,

I finally found the issue by preparing a project to show you my 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!

I would you deal with app.css and app.android.css and app.ios.css?

NathanWalker commented 7 years ago

Please try 1.3.2 just published now if you are still having trouble. Note new usage guide for TNSFontIconModule in readme, for example in your NgModule:

imports: [
  NativeScriptModule,
  TNSFontIconModule.forRoot({
    'fa': 'font-awesome.css'
  })
]