1

我正在尝试添加插件：nativescript-fonticon

我目前被困在必须转换 css 文件的部分。

在自述文件中，它指出我必须先配置我的 css 和转换器，然后才能开始转换：

import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });

我应该如何在 nativescript-vue 中做到这一点？

4

2 回答 2

3

你看起来是在正确的轨道上。您应该将初始化代码放在您的main.js文件中（或任何入口点文件的名称）。

以下是如何让它在 NativeScript-Vue 中工作。

fontawesome-free-5.9.0-web.zip从这里下载并解压。

将webfonts/fa-brands-400.ttf,webfonts/fa-regular-400.ttf和添加webfonts/fa-solid-900.ttf到 app/fonts目录。

添加css/fontawesome.css到app/assets目录。fa-*:before从此文件中删除任何非类。

在您的应用程序的main.js. 启动应用程序时，您应该会看到每个类的控制台日志。

import { TNSFontIcon, fonticon } from 'nativescript-fonticon'

TNSFontIcon.debug = true
TNSFontIcon.paths = {
  'fa': './assets/fontawesome.css',
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)

在您应用的主 css 文件中，例如app.scss.

.fa-brands {
  font-family: "Font Awesome 5 Brands", "fa-brands-400";
}

.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;
}

现在在您的视图中使用它们。

<Label :text="'fa-facebook-f' | fonticon" class="fa-brands" />
<Label :text="'fa-eye' | fonticon" class="far" />
<Label :text="'fa-eye' | fonticon" class="fas" />
于 2019-07-22T23:01:40.627 回答
2

我找到了一个实际使用 fonticons 插件以及如何使用它的博客： https ://nativescript-vue.org/blog/using-fonticons/

编辑：经过几次 Nativescript 和 Nativescript-Vue 更新后，它似乎无法正常工作。比较难用。我建议导入字体并使用相应的 unicode，如下所示：

数据：

icon: '\ue905'

标记：

<Label class="ico" :text="icon"/>
于 2018-08-09T15:23:09.747 回答