更简单地在 NativeScript 中使用字体图标的方法

问题

您可以通过在视图中使用类和 unicode 引用来使用 NativeScript 中的图标字体

• CSS

.fa {
  font-family: FontAwesome;
}

• 视图

<Label class="fa" text="\uf293"></Label>

这行得通，但跟踪 unicodes 并不有趣。

解决方案

使用此插件，您可以通过特定的类名来引用 fonticon

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label> 

安装

npm install @nativescript-community/fonticon --save

使用方法

FontAwesome 将在以下示例中使用，但您可以使用任何自定义字体图标集合。

• 将字体图标 .ttf 文件放置在 app/fonts 中，例如

app/fonts/fontawesome-webfont.ttf

• 在 app.css 全局文件中创建基本类，例如

.fa {
  font-family: FontAwesome, fontawesome-webfont;
}

注意：Android 使用文件名作为字体族名称（在本例中为 fontawesome-webfont.ttf。iOS 使用字体的实际名称；例如，如此处所示。您可以重命名字体文件名为 FontAwesome.ttf 以使用： font-family: FontAwesome。您可以在这里了解更多信息。（http://fluentreports.com/blog/?p=176）。

• 将 CSS 复制到 app 中的某个位置，例如

app/font-awesome.css

然后修改 CSS 文件以隔离所需的图标字体。 观看此视频以更好地了解。

• 配置字体并设置转换器

import * as application from '@nativescript/core/application';
import {FontIcon, fonticon} from '@nativescript-community/fonticon';

FontIcon.debug = true; <-- Optional. Will output the css mapping to console.
FontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
FontIcon.loadCss();

application.setResources( { fonticon } );
application.run({ moduleName: 'main-page' });

• 使用转换器，例如

<Label class="fa" text="{{'fa-bluetooth' | fonticon}}"></Label> 

演示 FontAwesome（iOS）	演示 Ionicons（iOS）

演示 FontAwesome（Android）	演示 Ionicons（Android）

Font Awesome 5

在这种情况下，您必须复制并导入每个 ttf 文件，并将其与适当的类关联，但仍然只需使用 fa 前缀导入一次 css

.fas {
  font-family: Font Awesome 5 Free, fa-solid-800;
}
.far {
  font-family: Font Awesome 5 Free, fa-regular-400;
}

关于 NativeScript 与 Angular 的使用

FontIcon.paths = {
  'fa': 'font-awesome.css'
};

如果您使用 Angular，请使用以下内容代替

• nativescript-ng2-fonticon

致谢

想法来自 Bradley Gore 的这篇帖子。

贡献者

• NathanaelA

许可协议

MIT