离子标签在桌面和移动设备上呈现不同答案

【问题标题】：Ion tabs rendering differently on desktop versus mobile离子标签在桌面和移动设备上呈现不同
【发布时间】：2016-05-08 14:25:37
【问题描述】：

我最近为我的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;
}

【问题讨论】：

标签： android css ionic-framework sass

【解决方案1】：

您的具有ionicons 类定义的ionic.css 文件不会作为移动构建的一部分包含在index.html 中。

确保：

platforms/www/<android/ios>/<path to index.html> 处的 index.html 文件包含对 ionic.css 的引用
将文件ionic.css复制到所需路径

您还可以在chrome://inspect 中检查您的移动版本（适用于 android）或使用 Safari 浏览器（适用于 ios 版本），以确保此文件在您的应用的移动版本中可用

【讨论】：