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

Question

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

我做的是这样的：

将ttf file放在/src/fonts/icomoon.ttf（同级app）
将此代码插入 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 中，我是这样绑定文本的。 <Label textWrap="true" text="{{iconmoonLbl}}" class="ico"></Label>

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

Answer 2

我有同样的问题，我注意到它需要使用整个格式 ，然后我转向那个很棒的图标插件。

尝试

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

此外，请记住 Android 和 IOs 处理命名的方式不同，请使用新文档进行检查。

Note: In iOS your font file should be named exactly as the font name. If you have any doubts about the original font name, use the Font Book app to get the original font name.

Icon Fonts Nativescript/Angular

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

How to use custom icon fonts?

css

fonts

nativescript

nativescript-angular