在Nativescript 3.4.2(Angular5)中使用Font Awesome4.7图标显示异常求助

这种信封占位符简直是NativeScript字体集成的经典坑！我帮你梳理下Android平台上最容易遗漏的几个关键步骤，大概率能解决问题：

1. 确认字体文件的放置路径 #

首先得把Font Awesome 4.7的fontawesome-webfont.ttf文件放到正确的目录：

• 路径必须是App_Resources/Android/src/main/assets/fonts，如果fonts文件夹不存在，手动创建一个
• Android对文件名大小写敏感，建议把文件名改成全小写：fontawesome-webfont.ttf，避免空格或特殊字符

2. 全局样式里的字体声明要准确 #

在app.css（或你的全局样式文件）里添加Font Awesome的字体族声明，注意内部名称和文件名的匹配：

.fa {
    font-family: "FontAwesome", fontawesome-webfont;
    font-size: 24; /* 按需调整大小 */
}

这里的FontAwesome是字体的内部名称（Font Awesome 4.7固定值），第二个值是字体文件的文件名（不带.ttf后缀）。

3. 图标引用方式要符合NativeScript规则 #

别直接用HTML实体的写法，推荐两种靠谱的引用方式：

• 方式一：在Label里直接写Unicode转义字符

<Label class="fa" text="&#xf007;"></Label> <!-- 这是用户图标 -->

• 方式二：在组件里定义Unicode变量，再绑定到模板

// 组件.ts文件
export class YourComponent {
  faUserIcon = String.fromCharCode(0xf007);
}

<Label class="fa" [text]="faUserIcon"></Label>

4. 清理缓存并重建项目 #

NativeScript的缓存经常搞事情，执行以下命令彻底清理后重新运行：

tns clean
tns run android

5. 检查字体是否被正确打包 #

可以解压生成的APK文件，查看assets/fonts目录下是否有fontawesome-webfont.ttf。如果没有，说明文件没被正确复制，再检查路径是否正确。

如果以上步骤都试过还是不行，可以试试用绝对路径声明字体：

.fa {
    font-family: "FontAwesome";
    src: url("~/App_Resources/Android/src/main/assets/fonts/fontawesome-webfont.ttf");
}

内容的提问来源于stack exchange，提问作者David Zemina