3

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

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

我这样做的方式就像我在ionic serve检查和检查时做烧烤的方式一样，我发现我的标签：

<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 文件中）不会修改图标样式。难道我做错了什么？我的样式没有正确编译吗？

4

3 回答 3

3

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

对于安卓：

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

.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
  color: 'my-brand-color';
}
于 2017-08-31T10:35:34.377 回答
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已执行。希望这会有所帮助，问候。

于 2016-04-27T01:49:35.633 回答
1

您是否尝试过运行：ionic setup sass？

它将在您的 ionic 项目上设置 sass，然后在您运行ionic serveSASS 时将其编译到项目的 css 文件夹中。

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

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

于 2016-04-26T23:58:50.577 回答