Nativescript 和 FontAwesome
Nativescript and FontAwesome
我正在尝试在 Nativescript 应用程序中使用图标字体 FontAwesome，根据这篇文章，这是可能的 https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon
我做了那篇文章中描述的所有事情：
- 在 app/fonts
中添加了 .ttf
在app.css
中添加了class
.fa{
字体系列："FontAwesome"；
}
像这样在XML中使用它
文本="" class="fa"
但结果很令人失望：
我还尝试了 "\uf230" 语法，但它呈现为纯文本。
我做错了什么？
可能是几件事。它适用于 iOS 吗？由于您的 CSS 定义是 iOS 兼容的，而不是 Android 因为 Android 需要实际的文件名（不带扩展名）而 iOS 需要字体名称。所以我将其设为 xplatform-ready（文件为 'fontawesome-webfont.ttf'）：
.fa {
font-family: 'FontAwesome', fontawesome-webfont;
}
\f005 语法没问题 (<Label class="fa" [text]="'\uf005'"></Label>)，但我正在使用出色的 nativescript-ngx-fonticon 插件（还有一个 non-Angular 插件）能够改为这样做：
<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>
要使其正常工作，您必须确保 "fonts" 目录位于 "app" 文件夹内并且存在以下文件：
font-awesome.eot
font-awesome.ttf
我选择采用这个字体作为我应用程序的默认字体，这样我就不用担心我要用它的地方和输入多少合适了class，一切都变得很好，结果很完美。
在CSS中，你只需要根据自己的兴趣定义一个选择器来使用源，所以只需要使用指令：
page {
font-family: 'FontAwesome'
}
然后在您想要图标的地方，只需使用一个 html 实体来代表它搜索站点：http://fontawesome.io/icons/
查看图片：
你可以在我开始的时候看到这个视频。它在视频中更正了分机曾经很专心。
我正在尝试在 Nativescript 应用程序中使用图标字体 FontAwesome，根据这篇文章，这是可能的 https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon
我做了那篇文章中描述的所有事情：
- 在 app/fonts 中添加了 .ttf
在app.css
中添加了class.fa{ 字体系列："FontAwesome"； }
像这样在XML中使用它
文本="" class="fa"
但结果很令人失望：
我做错了什么？
可能是几件事。它适用于 iOS 吗？由于您的 CSS 定义是 iOS 兼容的，而不是 Android 因为 Android 需要实际的文件名（不带扩展名）而 iOS 需要字体名称。所以我将其设为 xplatform-ready（文件为 'fontawesome-webfont.ttf'）：
.fa {
font-family: 'FontAwesome', fontawesome-webfont;
}
\f005 语法没问题 (<Label class="fa" [text]="'\uf005'"></Label>)，但我正在使用出色的 nativescript-ngx-fonticon 插件（还有一个 non-Angular 插件）能够改为这样做：
<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>
要使其正常工作，您必须确保 "fonts" 目录位于 "app" 文件夹内并且存在以下文件：
font-awesome.eot
font-awesome.ttf
我选择采用这个字体作为我应用程序的默认字体，这样我就不用担心我要用它的地方和输入多少合适了class，一切都变得很好，结果很完美。
在CSS中，你只需要根据自己的兴趣定义一个选择器来使用源，所以只需要使用指令：
page {
font-family: 'FontAwesome'
}
然后在您想要图标的地方，只需使用一个 html 实体来代表它搜索站点：http://fontawesome.io/icons/
查看图片：
你可以在我开始的时候看到这个视频。它在视频中更正了分机曾经很专心。