Question

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

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) {}

Answer 1

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

我在示例项目中测试了ionicons，您可以在我的github repo中查看它here。此外，您可以查看此文章：Icon Fonts

Answer 2

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

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

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

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

希望这可以帮到你。

Answer 3

我终于找到了这个问题。

我有app.css和app.android.css。我对fonticon的所有设置都在app.css中。由于app.android.css，＆＃34;编译器＆＃34;取而代之的是来自app.android.css的信息！

中国符号而不是功能或ionicon图标

3 个答案: