几乎所有的项目都需要使用某种图标。虽然一开始使用简单的图像格式图标，比如拖放一个 .png 文件很简单，但很快你就会发现，在应用的生命周期后期寻找和添加更多的基于图像的图标是很累人的。
如果你来自网页开发领域，你可能对字体图标库（如 FontAwesome、Ionicons 等）相当熟悉。在本文中，我们将尝试借助 nativescript-fonticon 包为 NativeScript 添加字体图标并轻松使用它们。
旁注：还有另一个名为 @nativescript-community/fonticon 的包，但目前维护得不太好。所以不要混淆这两个包。
1. 它是如何工作的
通常，你放在 /src/fonts 目录下的所有字体都会被自动加载。所以实际上，你可以为你的元素（比如 <Label>）设置 font-family，然后直接输入字符编码，类似“\f098”。这对人类可读性来说完全没有意义，但它确实有效。
基本上，nativescript-fonticon 包会扫描提供的 .css 文件，查找你提供的前缀名称（如 “fa-“）的所有类名，并记住它的 “content”，即代表字体文件中实际图标的 Unicode 字符码：
为 NativeScript 项目添加字体图标
然后，它会在你选择的字体图标库的普通类名和难以记忆的字符码之间建立一个映射。这样你就可以用更易记的方式使用图标名称，例如：“fa-user”、“fa-computer” 等。酷吧！
2. 找到你想使用的字体图标库。
有很多这样的库。在本文中，我们将使用社区最受欢迎的字体图标集：FontAwesome。
下载 FontAwesome，你可以前往：fontawesome.com/v6/download…
点击“Download web version”（下载网页版）为自己获取一份副本。（这同样适用于 FontAwesome Pro 版本）
在下载的 zip 包中会有 .css 文件和字体文件本身。如前所述，如果你尝试使用其他字体图标库，请确保它为你提供了上述两样东西，否则此设置将不起作用。
3. 将字体图标添加到 NativeScript 项目
准备好 .css 和字体文件后，按照以下方式复制到你的项目中：
不知为何，如果你把 .css 放在根目录 /src 下它不起作用，但如果放在子目录如 /src/assets 下它就起作用。请注意。
4. 定义类名和字体族
接下来，你必须定义一个类名，以便你可以轻松地覆盖模板中元素的字体。对于 FontAwesome Free，在你的 app.css 中添加以下内容即可：
.fa {
font-family: "Font Awesome 6 Free", "fa-regular-400";
font-style: normal;
font-weight: 400;
font-display: block;
}
.fas {
font-family: "Font Awesome 6 Free", "fa-solid-900";
font-style: normal;
font-weight: 900;
font-display: block;
}
关于 font-family 的说明：
"Font Awesome 6 Free"-> 这是用于 iOS 的，因为 iOS 会使用你放在/src/fonts目录下的字体的完整名称。"fa-solid-900"-> 这是用于 Android 的，在 Android 方面，它使用的是你放在/src/fonts目录下的字体的实际文件名。- 阅读更多：docs.nativescript.org/project-str…
5. 配置 nativescript-fonticon
最后一步，我们需要告诉 nativescript-fonticon 到哪里去查找，以及字体图标的前缀名称是什么，这样它才能为我们完成扫描类名和字符码的工作。
这必须在 app.ts/app.js 中完成，如下所示。请注意，本教程适用于 NativeScript-Vue。
import { createApp } from "nativescript-vue";
import Home from "./components/Home.vue";
const app = createApp(Home);
/**
* Font icon
*/
import { FontIconFactory, fonticon } from "nativescript-fonticon";
import { knownFolders } from "@nativescript/core/file-system";
FontIconFactory.debug = true;
FontIconFactory.paths = {
fa: knownFolders.currentApp().getFile("./assets/css/fa.css").readTextSync(),
};
FontIconFactory.loadCss();
// Vue 3
app.config.globalProperties.$fonticon = fonticon;
// Vue 2
// Vue.filter('fonticon', fonticon);
app.start();
Vue 3 移除了过滤器（filter），所以唯一的方法是定义一个全局函数，然后稍后使用 this.$fonticon -> 你可以将其改为其他你喜欢的名称。
之后，尝试 ns run，如果你看到类似这样的控制台输出，说明扫描成功！
为 NativeScript 项目添加字体图标
很好，但由于 nativescript-fonticon 中的一个 bug，阻止它正确识别 FontAwesome 的类名，我们可能还不能使用图标。让我们看看如何解决这个问题。
注意，:: vs : bug 在 nativescript-fonticon 中
更新于 2024-05-07：这个 bug 现已在 8.1.0 版本中得到解决。请确保你将 package.json 更新到最新版本。
如果你查看 FontAwesome 提供的 .css 文件，你会发现每个类都是这样定义的：
每个图标定义为：
.fa-volleyball-ball::before {
content: "\f45f"; }
它使用 ::before 而不是 :before。而 nativescript-fonticon 只会处理 :before（单冒号），所以这就是问题所在。例如，如果你想打印 fa-user 图标，你实际上必须使用 fa-user:（末尾加一个冒号）。
如果你想知道使用 before 伪选择器的正确标准是什么，简短的答案是：::before。长答案，请阅读更多：css-tricks.com/to-double-c…
解决方法是，将 FontAwesome .css 中的每一个 ::before 实例替换为 :before，以使此设置生效。
如果你懒得动手，可以在这里获取我的版本：github.com/NewbieScrip…
在该 bug 修复之前，这也适用于其他字体图标库。我已经提交了一个 PR 到 nativescript-fonticon 来解决这个问题（已合并！🎉）。希望它能尽快被合并。
5. 在你的模板中使用图标
最后，你现在可以像这样在你的模板中平静地使用字体图标了：
<Label
class="fas"
:text="$fonticon('fa-explosion')"
/>
对于 FontAwesome，你可以找到所有可用的图标：fontawesome.com/icons。请注意，如果你没有 Pro 版本，你只能使用免费图标。在撰写本文时，最新的 FontAwesome 是 V6.4.2。
