NativeScript Vue - Material 设计图标未显示

Question

在assets/fonts中，我有materialdesignicons-webfont.ttf，在assets/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。

请帮忙！

Answer 1

将这些行添加到您的 CSS、

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

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

NativeScript Vue - Material 设计图标未显示

NativeScript Vue - Material Design Icons not showing

javascript

css

material-design

nativescript

nativescript-vue