nativescript-font的nativescript-fonticon

时间:2018-08-09 14:48:11

标签: nativescript-vue

我正在尝试添加插件: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中做到这一点?

2 个答案:

答案 0 :(得分:0)

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

编辑: 在更新一些Nativescript和Nativescript-Vue之后,它似乎无法正常工作。很难使用。 我建议导入字体并使用如下所示的相应unicode:

数据:

icon: '\ue905'

标记:

<Label class="ico" :text="icon"/>

答案 1 :(得分:0)

您看起来好像在正确的轨道上。您应该将初始化代码放入main.js文件(或任何命名为入口点文件的文件)中。

这是在NativeScript-Vue中使其工作的方法。

here下载并提取fontawesome-free-5.9.0-web.zip

webfonts/fa-brands-400.ttfwebfonts/fa-regular-400.ttfwebfonts/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" />