使用 NativeScript + Angular2 简单地使用字体图标。

问题

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

.fa {
  font-family: FontAwesome;
}

视图

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

这行得通，但跟踪 unicodes 不好玩。

解决方案

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

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

安装

npm install nativescript-ng2-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。您可以在此处了解更多。

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

app/font-awesome.css

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

导入 TNSFontIconModule，将包含到 .css 文件位置的配置传递给 forRoot

使用类名前缀作为 key，并将 css 文件名作为值相对 app 目录。

import { TNSFontIconModule } from 'nativescript-ng2-fonticon';

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		TNSFontIconModule.forRoot({
			'fa': 'font-awesome.css'
		})
	]
})

可选将服务配置为 DEBUGGING 开启

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

import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ng2-fonticon';
// turn debug on
TNSFontIconService.debug = true;

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		TNSFontIconModule.forRoot({
			'fa': 'font-awesome.css'
		})
	]
})

设置您的组件

将服务注入到根组件的构造函数中很重要。否则 Angular 2 的 DI 系统将不会实例化您的服务。

import { Component } from 'angular2/core';
import { TNSFontIconService } from 'nativescript-ng2-fonticon';

@Component({
  selector: 'demo',
  template: '<Label class="fa" [text]="'fa-bluetooth' | fonticon"></Label> '
})
export class DemoComponent {
  constructor(private fonticon: TNSFontIconService) {
    // ^ IMPORTANT to cause Angular's DI system to instantiate the service!
  }
}

配置选项

如果您的字体集合名称与类名前缀不匹配，您可以将字体集合名称作为参数传递给管道，如下所示

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

使用此类配置

@NgModule({
	declarations: [
		DemoComponent,
	],
	bootstrap: [
		DemoComponent,
	],
	imports: [
		NativeScriptModule,
		TNSFontIconModule.forRoot({
			'fontawesome': 'font-awesome.css'
		})
	]
})