Ionic button 2 or any icon is not displayed. only the small box icon is displayed
I am facing this problem on many screens. eg. I have one screen where I added an icon on the left side of the navbar. but that doesn't show the icon at all. only the small rear box is shown. Here is my code:
<ion-buttons>
<button ion-button >
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons
I also use this:
<ion-buttons>
<button ion-button >
<ion-icon ios="ios-close" md="md-close"></ion-icon>
</button>
</ion-buttons
but not used. The small box icon is displayed.
Now, i tried with push nav.but there alos it doesn't show back button.here is my code:
my home.html:
<button class="button button-outline footerbtnone" (click)="login()">LOG IN</button>
my home.js
constructor(public navCtrl: NavController) {
}
login() {
this.navCtrl.push(LoginPage);
}
But when I go to LoginPage
, I don't see the back button icon. still i see that little black box icon. here is this image:
please help me. What I am missing.
thank
source to share
The squares probably indicate that the font is either not loading properly or the browser is trying to use an alternative font. An easy way to check that the ionic fonts font is loading at all is to check their sources in the 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 this file (or something similar) loading, then there is no font to render.
The ionicon font should be automatically loaded if it is referenced in your package.json file and exists in the node_modules folder. After checking this, if the font won't load, make sure you don't have any other CSS imports / variables that override the ionic font imports. for example something like this:
* {font-family: 'Lato' !important;}
The above will result in the ionicons font not being loaded because Lato is specified to be used for all glyphs, overriding the earlier @ionicons import.
source to share