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

问题

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

• CSS

.fa {
  font-family: FontAwesome;
}

• view

<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 文件并将其与适当的类相关联

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

但您仍然只需一次导入 css，并使用 fa 前缀

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

关于 NativeScript 和 Angular 的看法如何？

如果您使用 Angular，请使用此替代品

• nativescript-ng2-fonticon

致谢

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

贡献者

• NathanaelA

许可

MIT