在 Nativescript-Vue 中使用 FontAwesome

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

我使用 Nativescript-Vue 并使用 Nathan Walker 插件 nativescript-fonticon。它与 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>

Answer 2

我从 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] 文件夹中。 :-|

不确定我安装的所有这些花哨的新软件包现在会做什么。