首页 文章

Nativescript和FontAwesome

提问于
浏览 次
4

我试图在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中添加了类

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

  • 在XML中使用它就像这样

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

但结果令人失望：

Not working
我也尝试了"\uf230"语法，但是呈现为纯文本 .

我究竟做错了什么？

android ios font-awesome nativescript

2 回答

  • 9

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

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

    \f005 语法没问题（ <Label class="fa" [text]="'\uf005'"></Label> ），但我正在使用精彩的 nativescript-ngx-fonticon 插件（还有一个非Angular的插件）来代替：

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

    回复于
  • 1

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

    font-awesome.eot
font-awesome.ttf

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

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

    page {
  font-family: 'FontAwesome'
}

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

    见图：
    enter image description here

    你可以看到这个视频我在哪里开始 . 它在视频中纠正了过去常用的扩展 .

    回复于

相关问题