5

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

应用程序.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>

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

3 回答 3

0

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

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

于 2016-06-03T10:05:19.477 回答
0

我终于找到了问题。

我有 app.css 和 app.android.css。我对 fonticon 的所有设置都在 app.css 中。由于 app.android.css，“编译器”从 app.android.css 获取信息！

于 2016-06-04T00:57:08.453 回答
0

在 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";
}

希望这可以帮助你。

于 2016-06-03T15:14:36.053 回答