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

Question

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

我所做的是这样的:

1. 将ttf文件放到/src/fonts/icomoon.ttf(app同级)

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;'