nativescript-vue 的 nativescript-fonticon
Posted
技术标签:
【中文标题】nativescript-vue 的 nativescript-fonticon【英文标题】:nativescript-fonticon for nativescript-vue 【发布时间】:2019-01-17 02:22:35 【问题描述】:我正在尝试添加插件: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 中做到这一点?
【问题讨论】:
【参考方案1】:您看起来走在正确的轨道上。您应该将初始化代码放入您的 main.js
文件(或任何命名的入口点文件)中。
下面是如何让它在 NativeScript-Vue 中工作。
从here下载并提取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" />
【讨论】:
【参考方案2】:我找到了一个实际使用 fonticons 插件的博客以及如何使用它: https://nativescript-vue.org/blog/using-fonticons/
编辑: 经过几次 Nativescript 和 Nativescript-Vue 更新后,它似乎无法正常工作。比较难用。 我建议导入字体并使用相应的 unicode,如下所示:
数据:
icon: '\ue905'
标记:
<Label class="ico" :text="icon"/>
【讨论】:
这个。我在使用“#&xe902”时遇到了困难,而“\ue902”是要走的路。以上是关于nativescript-vue 的 nativescript-fonticon的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Nativescript-Vue 中直接监听组件根元素上的原生事件?