如何使用自定义图标字体？

Question

我正在使用 Nativescript和Angular 创建一个跨平台的应用程序。 我有一个要使用的自定义字体图标。我有一些svg文件，后来变成了ttf文件。当我将chars和其unicode代码一起使用时，它什么也没显示。

我所做的是这样：

1. 将ttf file放在/src/fonts/icomoon.ttf（同一级别的应用程序）上

2. 将此代码插入app.css文件中

.ico {
    font-family: icomoon, icomoon;
    font-weight: normal;
}

在home.component.html文件中，我这样使用它：

<!-- other stuff -->
<Label row="0" col="1" text="&#E904;" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />

我在哪里错了？我错过了什么吗？

P.S .： Unicode代码从e900到e907

P.P.S：我已经使用过Fontawesome，并且可以使用此代码。现在我想使用自己的字体，此代码不起作用。

编辑

我使用this guide并修改了一些内容。

在home.component.html文件中，我有：

<Label row="0" col="1" [text]="'ico-link' | fonticon" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />

我添加了文件app/assets/icomoon.css，并将其放在其中：

  font-family: 'icomoon';
  src: url('../../fonts/icomoon');
  src: url('../../fonts/icomoon') format('embedded-opentype'), url('../../fonts/icomoon') format('woff2'), url('../../fonts/icomoon') format('woff'), url('../../fonts/icomoon') format('truetype'), url('../../fonts/icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.ico {
  display: inline-block;
  font: normal normal normal 14px/1 icomoon;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-link:before {
  content: "\ue904";
}

，并且在app.ts中我添加了：

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
       //...
       TNSFontIconModule.forRoot({
                'ico': './assets/icomoon.css'
            })
     ]
    //...
   });

毕竟，它仍然不起作用。该图标不显示。

Answer 1

我已经更新了您的游乐场here。现在工作正常。

在您的html中，我这样绑定文本。  count(ab:Person[ab:Gender/@ab:Descriptor="Boy"]/ab:body/ab:finger) count(ab:Person[ab:Gender/@ab:Descriptor="Girl"]/ab:body/ab:finger)

，在.ts文件中，我正在使用String.fromCharcode  <Label textWrap="true" text="{{iconmoonLbl}}" class="ico"></Label>

Answer 2

我遇到了同样的问题，我注意到必须使用整个格式，然后才转到该超棒的图标插件。

尝试

<Label row="0" col="1" text="&#xe924;" class="ico" style="color:white; margin-right:20;" (tap)="showAlert()" />

此外，请记住，Android和IO的命名方式有所不同，请使用新文档进行确认。

注意：在iOS中，字体文件的名称应与字体名称完全相同。如果您对原始字体名称有任何疑问，请使用“字体书”应用来获取原始字体名称。

Icon Fonts Nativescript/Angular