ionic 2 后退按钮或任何图标未显示.只显示小框图标 [英] ionic 2 back button or any icon is not showing. only small box icon is showing

问题描述

我在许多屏幕上都面临这个图标问题.例如.我有一个屏幕，我在导航栏的左侧添加了一些图标.但它根本没有显示图标.仅显示小后箱.这是我的代码:

I am facing this icon problem in many screen. for example. i have one screen , where i have added some icon at left side of nav bar. but its not at all showing the icon. only small back box alone is showing .here is my code:

 <ion-buttons>
    <button ion-button >
        <ion-icon name="close"></ion-icon>
      </button>
       </ion-buttons

我也用这个:

 <ion-buttons>
        <button ion-button >
<ion-icon ios="ios-close" md="md-close"></ion-icon>
 </button>
           </ion-buttons

但没有用.仍然显示黑色小框图标.

but no use.still black small box icon is showing.

好的，我尝试使用 push nav.但是它没有显示后退按钮.这是我的代码:

okay now, i tried with push nav.but there alos its not showing the back button.here is my code :

我的 home.html :

  <button class="button button-outline footerbtnone" (click)="login()">LOG IN</button>

我的 home.js

 constructor(public navCtrl: NavController) {
  }
login() {
    this.navCtrl.push(LoginPage);

  }

但是当我移动到 LoginPage 时，我看不到后退按钮图标.我仍然看到那个小黑框图标.这里是那个图像:

But when i move to LoginPage i can't see the back button icon. still i am seeing that small black box icon.here that image :

请帮帮我.我错过了什么.

please help me out.what i am missing.

谢谢

推荐答案

方块可能表示字体未正确加载或浏览器正在尝试使用备用字体.验证是否已加载 ionicons 字体的一种简单方法是在 Chrome 开发工具中检查您的源代码.我的看起来像这样:http://localhost:8100/assets/fonts/ionicons.woff2?v=3.0.0-alpha.3

The squares probably signal that the font is either not getting loaded properly or the browser is trying to use an alternate font face. An easy way to verify that the ionicons font is being loaded at all is to check your sources in Chrome Dev Tools. Mine looks like this: http://localhost:8100/assets/fonts/ionicons.woff2?v=3.0.0-alpha.3

如果您没有看到加载该文件(或类似文件)，则没有要呈现的字体.

If you don't see that file (or something similar) getting loaded then there's no font to render.

如果 ionicon 字体在您的 package.json 文件中被引用并且存在于 node_modules 文件夹中，它应该会自动加载.验证这一点后，如果字体未加载，请确保您没有任何其他 CSS 导入/变量覆盖 ionicons 字体导入.例如这样的:

The ionicon font should get loaded automagically if it's referenced in your package.json file and exists in the node_modules folder. After verifying this, if the font is not getting loaded, make sure you don't have any other CSS imports/variables that are overriding the ionicons font import. e.g something like this:

 * {font-family: 'Lato' !important;}

以上将导致永远不会加载 ionicons 字体，因为 Lato 被指定用于所有字形，覆盖了早期的 @ionicons 导入.

The above will result in the ionicons font never being loaded because Lato is specified to be used for all glyphs, overriding the earlier @ionicons import.

这篇关于ionic 2 后退按钮或任何图标未显示.只显示小框图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！