Nativescript和FontAwesome

我试图在Nativescript应用程序中使用图标字体FontAwesome，这可以根据这篇文章https://www.nativescript.org/blog/mobile-app-best-practices—use-font-instead-of-image -to-显示-的图标

我做了那篇文章中描述的所有内容：

• 在app / fonts中添加.ttf

• 在app.css中添加了类

  .fa {font-family：“FontAwesome”; }

• 像这样在XML中使用它

  文本= “＆＃xf230;” 类= “FA”

但结果令人失望：

我也尝试了“\ uf230”语法，但是它呈现为纯文本。

我究竟做错了什么？

Answer 1

可能是一些事情。 它适用于iOS吗？ 由于您的CSS定义与iOS兼容，因此Android不需要实际的文件名（没有扩展名），而iOS需要字体名称。 所以我有xplatform-ready（文件是’fontawesome-webfont.ttf’）：

.fa { font-family: 'FontAwesome', fontawesome-webfont; } 

\f005语法没问题（ ），但我正在使用精彩的nativescript-ngx-fonticon插件（还有一个非Angular one）能够做到这一点：

Answer 2

要使其工作，您必须确保“fonts”目录位于“app”文件夹中，并且存在以下文件：

 font-awesome.eot font-awesome.ttf 

我选择采用这种字体作为我的应用程序的默认值，所以我不必担心我将在哪里使用它以及进入正确的课程多少，一切都变得非常好，结果是完美的。

在CSS中，您只需根据您对要使用的源的兴趣来定义选择器，因此只需使用该指令：

 page { font-family: 'FontAwesome' } 

然后你想要一个图标，只需在搜索网站时使用代表它的html实体： http ： //fontawesome.io/icons/

看图像：

您可以在此基础上看到此video。 它在video中纠正了过去常用的扩展。