中文符号代替功能或离子图标

Question

出于某种原因，我得到的是中文符号而不是正确的图标。我在 app/fonts 目录中有 .ttf，在 /app 下有 .css。希望你能发现我的错误

应用程序.css

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

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

主文件

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'
      });
    }
  })  
])

页面.html

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

页面.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) {}

Answer 1

在我看来，在 app.css 文件中设置 font-family 属性存在问题。下载自定义字体时，应将相同的字体文件名设置为font-family，不要更改。

我在一个示例项目中进行了测试，您可以在我的 github 存储库中ionicons查看它。此外，您可以查看这篇文章：图标字体