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

Question

我正在使用Nativescript 和 Angular 创建一个跨平台应用程序。 我有一个想要使用的自定义字体图标。我有一些 svg 文件，我将其转换为 ttf 文件。当我将这些字符与它们的 unicode 代码一起使用时，它什么也没有显示。

我所做的是:

1. 将ttf文件放在/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

我已经更新了你的 Playground here 。现在工作正常。

在你的 html 中，我绑定(bind)这样的文本。 <Label textWrap="true" text="{{iconmoonLbl}}" class="ico"></Label>

在 .ts 文件中我使用 String.fromCharcode this.iconmoonLbl = String.fromCharCode(0xe904);//'&#E904;'