从 node_modules 导入时不显示离子图标

Posted

技术标签:

【中文标题】从 node_modules 导入时不显示离子图标【英文标题】:Ionicons not showing when imported from node_modules 【发布时间】:2017-12-03 02:26:11 【问题描述】:

所以我的样式文件如下所示:

@import "normalize.css";
@import "ionicons/dist/css/icons.min.css";
@import "base/_grid";
@import "base/_variables";
@import "base/_mixins";
@import "base/_global";

@import "modules/_wrapper";
@import "modules/_row";
@import "modules/_hero";
@import "modules/_buttons";
@import "modules/_main-navigation";

除了 ionicons 之外的所有东西都可以正常工作,并且 ionicons.min.css 文件显示在捆绑的 css 文件中,以及 normalize.css 等。问题是图标不会显示,除非我手动将 cdn 包含在index.html 文件...我在这里缺少什么...?

因此,当从 node_modules 中包含时,离子图标不会出现在源代码中。

感谢大家的帮助!

【问题讨论】:

【参考方案1】:

您能否检查一下是否与此类似(未加载图标):https://github.com/ionic-team/ionicons/issues/526

如果是这样,你可以使用https://github.com/ionic-team/ionicons/issues/499中描述的web组件机制

我基本上把这个脚本包含在index.html

<!-- Fix for missing ionicons if using lazy loaded pages -->
  <script src="https://unpkg.com/ionicons@4.0.0-11/dist/ionicons.js"></script>

这样,您可以按预期方式使用离子:

 <button [navPush]="'admin'" ion-button icon-end>
        Admin
        <ion-icon name="star"></ion-icon>
 </button>

如果您想离线使用它,我在我的存储库中下载了 (700) 个文件。此外,如果您只想查看它的实际效果,请访问: https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-workaround-fix

【讨论】:

以上是关于从 node_modules 导入时不显示离子图标的主要内容,如果未能解决你的问题,请参考以下文章

离子导航返回按钮和菜单按钮一起显示

离子 - 在另一个视图上刷新时不应用 CSS

离子闪屏不可见

离子2 - 如何管理全局变量?

git 提交代码时不提交配置文件夹node_modules

安装时不显示APK图标