在 Nativescript-Vue 中使用 FontAwesome

Posted 2023-04-14

【中文标题】在 Nativescript-Vue 中使用 FontAwesome

【英文标题】：Using FontAwesome with Nativescript-Vue

【发布时间】：2020-05-24 01:45:57

【问题描述】：

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

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

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

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

我已经看了这么多说明，现在我的眼睛都在交叉。 今天我升级到v5。但我不认为我以前能够让可靠的工作。

【问题讨论】：

我可以知道你为什么同时应用 fa 和 fas（假设你在每个类中定义了不同的字体系列），你应该只应用一个？如果您仍然有问题，您可以发布这两个类的定义吗？

Manoj，我以为我以前的说明说过要同时使用这两种方法？

Anway，我正在尝试使用版本 5，这里的说明似乎暗示他们在插件中定义了 fas，并且它是默认的？ github.com/FortAwesome/vue-fontawesome#using-solid-icons

【参考方案1】：

我使用 Nativescript-Vue 并使用 Nathan Walker 插件 nativescript-fonticon。它与 FontAwesome 5 配合得很好。

它非常易于使用。

安装插件：

npm install nativescript-fonticon --save

将字体图标.ttf文件放在app/fonts中

fa-brands-400.ttf fa-regular-400.ttf fa-solid-900.ttf

创建基类（我的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>

【讨论】：

上面是 VueJS，第 6 步实际上应该是

【参考方案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] 文件夹中。 :-|

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