编辑离子选项卡图标样式 [英] Editing Ionic tab icon styles

问题描述

我正在一个Ionic项目中，其中的主要导航方法是制表符.中心选项卡需要突出，所以我在自己的scss中创建了这样的样式:

I am working on an Ionic project where the main navigation method is tabs. The center tab needs to stand out so I created a style in my scss like this:

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

我这样做的方式与ionic serve检查时的烧烤方式一样，我发现我的标签:

I did this the way I did barbecue when ionic serve'ing and inspecting, I find that my tab:

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

被编译为:

所以我想只为已编译的图标创建样式(我只想为标签图标而不是整个标签设置样式).奇怪的是，这没有用.但是，检查该元素并添加如下所示的样式即可:

So I thought just to create a style for the compiled icon (I only want to style the tab icon not the whole tab). Oddly, this did not work. However, inspecting that element and adding the styles like this works:

最终结果应该看起来像这样:

The end result is supposed to end up looking like this:

但是我只能在检查器中直接编辑<i>标记来实现这些样式.我上面发布的样式(位于ionic.app.scss文件中)不会修改图标样式.难道我做错了什么?我的样式不能正确编译吗?

But I can only achieve those styles directly editing the <i> tag in the inspector. The style I posted above (which is in the ionic.app.scss file) does not modify the icon styles. Am I doing something wrong? Do my styles not get compiled correctly?

推荐答案

在以下代码段中改用:

.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.希望这会有所帮助，问候.

By the way, if you use sass, ensure gulp sass or ionic setup sass has been executed. Hope this will help, regards.

这篇关于编辑离子选项卡图标样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！