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

【问题标题】：NativeScript Vue - Material Design Icons not showingNativeScript Vue - 材料设计图标未显示
【发布时间】：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，那我应该如何定义呢？

标签： javascript css material-design nativescript nativescript-vue

【解决方案1】：

将这些行添加到您的 CSS，

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

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

【讨论】：