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

Question

出于某种原因，我得到的是中文符号而不是正确的图标。我在应用程序/字体目录中有.ttf，.css在/app 下。希望你能找到我的错误

应用.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 文件中设置字体系列属性存在问题。下载自定义字体时，应将相同的字体文件名设置为字体系列，而不进行更改。

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

Answer 2

在 app.css 中，如果您在 android 上实现，则font-family必须与.ttf文件名相同。例如，你有字体文件是fontAwesome.ttf那么CSS应该是：

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

但是，如果是iOS，则必须确保font-family使用的是字体的名称。双击fontAwesome.tff，您将看到字体的名称："FontAwesome"（例如），然后：

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

希望这能帮助你。

Answer 3

我终于找到了问题。

我有app.css和app.android.css。我对字体图标的所有设置都在app.css中。由于 app.android.css，"编译器"从 app.android 获取信息.css而是！