将 FontAwesome 与 Nativescript-Vue 结合使用

Question

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

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

但是当我想要一个 Solid（或者我想是其他任何一个）时，没有爱。

<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-Vue 并使用 Nathan Walker plugin nativescript-fonticon。它与 FontAwesome 5 配合使用非常好。

非常容易使用。

安装插件：

npm install nativescript-fonticon --save
将字体图标 .ttf 文件放入 app/fonts

fa-brands-400.ttf fa-regular-400.ttf fa-solid-900.ttf
创建基础class（我的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; }
将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
在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)
在您的代码中使用该组件：

<Label class="fas" text="fa-chess-knight | fonticon"></Label>

Using FontAwesome with Nativescript-Vue