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

【问题标题】：How to use custom icon fonts?如何使用自定义图标字体？
【发布时间】：2023-04-03 05:07:01
【问题描述】：

我正在使用 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'
            })
     ]
    //...
   });

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

【问题讨论】：

你试过了吗？ How to import a new font into a project - Angular 5
您在根级别有src 文件夹吗？如果是，您应该将字体放在根 (src) 文件夹中。还要确保您使用的是字体的 postscript 名称，在 iOS 上必须使用 postscript 名称。
对不起，我错了。我在src 下有字体文件夹，与app 处于同一级别。我编辑问题
@WojciechX 不，我不知道我是否可以使用它。这似乎是另一种类型的项目
@Manoj 文件名和后记名相同icomoon

标签： css fonts nativescript nativescript-angular

【解决方案1】：

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

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

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

【讨论】：

感谢分享！我需要这个解决方案

【解决方案2】：

我遇到了同样的问题，我注意到需要使用整个格式 &#xe924;，然后我转向了那个很棒的图标插件。

试试

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

另外，请记住 Android 和 IO 处理命名不同，请使用新文档进行检查。

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

Icon Fonts Nativescript/Angular

【讨论】：