Question

所以我的样式文件看起来像这样：

@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.min.css文件显示在捆绑的css文件中，以及normalize.css等。问题是除非我手动包含cdn，否则图标不会显示在index.html文件中...我在这里缺少什么..？

因此，当从node_modules中包含时，离子不会出现在源中。

感谢您的帮助！

Answer 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导入时未显示Ionicons

1 个答案: