NativeScript Vue - 材料设计图标未显示

Posted 2023-04-14

【中文标题】NativeScript Vue - 材料设计图标未显示

【英文标题】：NativeScript Vue - Material Design Icons not showing

【发布时间】：2019-07-31 22:27:40

【问题描述】：

在资产/字体中，我有materialdesignicons-webfont.ttf，在资产/css 中，我有materialdesignicons.css。最后在main.js，我有以下内容：

import TNSFontIcon, fonticon from 'nativescript-fonticon';

TNSFontIcon.debug = true;
TNSFontIcon.paths = 
  'mdi': './assets/css/materialdesignicons.css'
;
TNSFontIcon.loadCss();

Vue.filter('fonticon', fonticon);

我正在使用如下图标：

<Label class="mdi" :text="'mdi-youtube' | fonticon" style="color: #fff;font-size: 40px;" />

但是，图标根本不显示。

顺便说一句，我从https://github.com/Templarian/MaterialDesign-Webfont/tree/master/css 获取了css。

请帮忙！

【问题讨论】：

好像你还没有定义字体系列，你能分享一下你的CSS中mdi类的定义吗？

github.com/Templarian/MaterialDesign-Webfont/blob/master/css/… -> 这里已经定义了。

如果我应该定义mdi，那我应该如何定义呢？

【参考方案1】：

将这些行添加到您的 CSS，

.mdi 
  font-family: "Material Design Icons", "materialdesignicons-webfont";

基本上就是你项目中的后记名、字体文件名。此外，您必须使用fonts 目录而不是assets/fonts，默认情况下fonts 目录下的文件仅在应用启动时自动注册。