使用 NativeScript 简化字体图标的使用方式

使用方法

npm install nativescript-fonticon --save

注意

• v8+ 现在将 nativescript-fonticon 和 nativescript-ngx-fonticon 合并，以便与更简单、一致的打包方式一起使用：例如，如果您使用 Angular，可以从 nativescript-fonticon/angular 导入 - 下文将提供使用示例。
• 如果您之前使用的是 v7 或更低版本，您使用的是 TNS 前缀命名，这现在不再使用了。

问题

您可以通过在视图中使用具有 unicode 引用的类来使用图标字体与 NativeScript 一起使用

• css

.fa {
  font-family: FontAwesome;
}

• view

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

这可以工作，但跟踪 unicodes 可不是什么乐趣。

解决方案

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

在您的应用中包含字体图标

以下示例将使用 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。您可以在此处了解更多信息。

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

app/assets/font-awesome.css

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

• 导入 FontIconModule 并将包含到 .css 文件位置的配置传递给 forRoot

使用类名前缀作为 key，并将 css 文件名作为相对目录（您的 app.module.ts 所在目录）的值，然后 require css 文件。

原生

配置您的字体并设置转换器（如果使用原生 NativeScript）

import { Application } from 'application';
import { FontIconFactory, fonticon } from 'nativescript-fonticon';

// Optional. Will output the css mapping to console.
FontIconFactory.debug = true;

// Configure paths to font icon css
FontIconFactory.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};

// Load the css
FontIconFactory.loadCss();

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

在您的标记中使用 fonticon 管道。

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

Angular

设置您的模块

import { FontIconModule } from 'nativescript-fonticon/angular';

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		FontIconModule.forRoot({
			'fa': require('~/app/assets/css/fa-5.css'),
			'ion': require('~/app/assets/css/ionicons.css')
		})
	]
})

在您的标记中使用 fonticon 管道。

<Label class="fa" [text]="'fa-bluetooth' | fonticon"></Label>

• 可选 配置服务并启用调试

当与新的字体集合一起工作时，您可能需要查看服务提供的映射。传递 true（如下所示）将导致映射输出到控制台，以确定您的字体集合是否正确设置。

import { FontIconModule, FontIconService } from 'nativescript-fonticon/angular';
// turn debug on
FontIconService.debug = true;

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		FontIconModule.forRoot({
			'fa': require('~/app/assets/css/fa-5.css')
		})
	]
})

致谢

此想法来自 Bradley Gore 的 帖子。

许可

MIT