编辑 Ionic 选项卡图标样式

Question

我正在做一个主要导航方法是选项卡的 Ionic 项目。中心选项卡需要突出显示，所以我在我的 scss 中创建了这样的样式：

i.icon.ion-ios-camera {
    height: inherit;
    border-radius: 100em;
    background-color: #ff5b38;
}

我在 ionic serve'ing 和检查时以烧烤的方式这样做，我发现我的标签：

<ion-tab title="Post" icon="ion-ios-camera" href="#/home/post">
    <ion-nav-view name="tab6"></ion-nav-view>
</ion-tab>

编译为：

所以我只想为编译后的图标创建一个样式（我只想为选项卡图标而不是整个选项卡设置样式）。奇怪的是，这不起作用。但是，检查该元素并添加这样的样式有效：

最终结果应该是这样的：

但我只能在检查器中直接编辑 <i> 标签来实现那些样式。我上面发布的样式（在 ionic.app.scss 文件中）不会修改图标样式。难道我做错了什么？我的样式没有正确编译吗？

Answer 1

你试过运行宁：ionic setup sass吗？

它将在您的离子项目上设置 sass，然后当您运行 ionic serve 您的 SASS 应该编译到 css 文件夹项目。

您也可以尝试将代码添加到 www/css 中的 style.css。

您可以在此处查看有关使用 ionic 设置 sass 的完整文章：http://ionicframework.com/docs/cli/sass.html

Answer 2

改为使用以下代码段：

.tabs i.icon.ion-ios-camera {
  height: inherit;
  background-color: #ff5b38;
  border-radius: 100em;
}

.tabs i.icon.ion-ios-camera:before {
  color: white;
}

顺便说一句，如果你使用sass，确保gulp sass或ionic setup sass已经执行。希望这会有所帮助，问候。

Answer 3

经过大量研究，我找到了实际的解决方案，只需添加您的风格

对于Android：

如果您更改非活动图标更新错误。

.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
  color: 'my-brand-color';
}

编辑 Ionic 选项卡图标样式

Editing Ionic tab icon styles

css

sass

ionic-framework

ionic-tabs