离线标签在桌面与移动设备上的呈现方式不同

Question

我最近设计了ion-tabs。

它们似乎在桌面上正确呈现，但在移动设备上却无法呈现。

我做错了什么？

在桌面上：

ion-tabs正确观看。

在移动设备上

ion-tabs变白了。

我需要做些什么来让两者看起来都一样。我一直在关注this，显然我需要制作一个自定义主题，但是想知道是否有更快的方法。

到目前为止，这是我的代码：

HTML

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab icon-off="ion-android-home" icon-on="ion-android-home" ui-sref="tab.home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Notifications Tab -->
  <ion-tab icon-off="ion-android-notifications" icon-on="ion-android-notifications" ui-sref="tab.notifications">
    <ion-nav-view name="tab-notifications"></ion-nav-view>
  </ion-tab>

  <!-- Search Tab -->
  <ion-tab icon-off="ion-android-search" icon-on="ion-android-search" ui-sref="tab.search">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab icon-off="ion-android-person" icon-on="ion-android-person" ui-sref="tab.account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

SCSS

// Tabs

.tabs {
    background-color: #242424;
}

ion-tabs.tabs-color-active-positive .tab-item {
    color: #fff !important;
}

.tab-item .icon {
    padding-top: 2px;
    height: 48px;
    font-size: 40px;
}

Answer 1

具有ionicons类定义的ionic.css文件未作为移动版本的一部分包含在index.html中。

确保：

1. platforms/www/<android/ios>/<path to index.html>处的index.html文件包含对ionic.css的引用

2. 文件ionic.css将以所需路径复制

您还可以在chrome://inspect中查看适用于Android的移动版本，或使用Safari for ios版本来确保此文件在您的应用的移动版本中可用