使用FontAwesome与Nativescript-Vue

Question

我只是在我的Nativescript应用程序中没有成功地使用FontAwesome图标。如果我只想使用常规图标，它可以正常工作：

<Label col="0" text.decode="&#xf279;" class="fa"></Label>

但是当我想要一个坚实的(或者我想其他任何一个)，没有爱。

<Label col="0" text.decode="&#xf5da;" class="fa fas"></Label>

现在我已经看了那么多指令了，我的眼睛被交叉了。今天我升级到了v5。但我不知道我以前能让那些实心的去工作。

Answer 1

我从V5指令中尝试的任何东西似乎都不起作用。(也许有人可以为Nativescript-Vue中的使用编写明确的说明。)

但是，回到旧的方式，简单的

<Label col="0" text.decode="&#xf5da;" class="fas"></Label>

使用

.fas {
        font-family: "Font Awesome 5 Free", "fa-solid-900";
    }

而且，当我第一次设置它时，我肯定是被插入的，因为fa-solid-900实际上不在我的[app.fonts][1]文件夹中。*--

不知道我现在安装的那些漂亮的新软件包会做些什么。

Answer 2

我和Nativescript一起工作，我使用内森·沃克插件土生土长。它在FontAwesome 5中运行得很好。

它很容易使用。

1. 安装插件： npm install nativescript-fonticon --save
2. 将字体图标.ttf文件放置在app/fonts中 fa-brands-400.ttf fa-regular-400.ttf fa-solid-900.ttf
3. 创建基类(我的css文件放在assets/scss/global.scss中)： .fa, .far { font-family: 'Font Awesome 5 Free', 'fa-regular-400'; font-weight: 400; } .fas { font-family: 'Font Awesome 5 Free', 'fa-solid-900'; font-weight: 900; } .fab { font-family: 'Font Awesome 5 Free', 'fa-brands-400'; font-weight: 400; }
4. 将css复制到app的某个地方。我将文件放在assets\css文件夹中(我使用小型化格式)： assets/css/all.min.css assets/css/brands.min.css assets/css/fontawesome.min.css assets/css/regular.min.css assets/css/solid.min.css
5. 在main.js中添加和加载插件 import { TNSFontIcon, fonticon } from 'nativescript-fonticon' // Load TNSFonticon TNSFontIcon.debug = true TNSFontIcon.paths = { fa: './assets/css/fontawesome.min.css', far: './assets/css/regular.min.css', fas: './assets/css/solid.min.css', fab: './assets/css/brand.min.css' } TNSFontIcon.loadCss() Vue.filter('fonticon', fonticon)
6. 使用代码中的组件： <Label class="fas" text="fa-chess-knight | fonticon"></Label>