標簽圖標在Ionic 3中不可見

Question

在./pages/tabs/tabs.html內部

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-
circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Settings" tabIcon="cog"></ion-
tab>
</ion-tabs>

在./pages/tabs/tabs.ts內部

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {SettingsPage} from '../settings/settings' ;

@Component({
templateUrl: 'tabs.html'
})
export class TabsPage
{
   tab1Root = HomePage;
   tab2Root = AboutPage;
   tab3Root = SettingsPage;

   constructor() 
   {
   }
}

所以，我不明白為什么我的圖標沒有顯示在這里。 在此構建之前，以前已經可以運行。 我什么都沒改變。 現在不起作用。

Answer 1

這樣將tabs.html留空。

<ion-content padding></ion-content>

在tabs.ts中嘗試一下。

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {SettingsPage} from '../settings/settings' ;
import { Platform } from 'ionic-angular';

@Component({
template: `
    <ion-tabs class="tabs-icon-text" [color]="isAndroid ? 'royal' : 'primary'">
    <ion-tab tabIcon="home" tabTitle="Home" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="information-circle" tabTitle="About" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="cog" tabTitle="Settings" [root]="tab3"></ion-tab>
    </ion-tabs>
`})

export class TabsPage {
    tab1 = HomePage;
    tab2 = AboutPage;
    tab3 = SettingsPage;
    isAndroid: boolean = false;

    constructor(platform: Platform) {
        this.isAndroid = platform.is('android');
    }    
}

Answer 2

添加到：> scss

  .tabbar{opacity: 1;}