Search code examples
cssionic-frameworksassionic-tabs

Editing Ionic tab icon styles

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;
}

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>

gets compiled to:

Compiled 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:

Editing styles through inspector

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

Tab

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?

Solution

  • Use below snippet instead:

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

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

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