How to change font color of a single tabTitle

Ionic Framework ionic-v3
1

Hello guys,

How can I change font color of an ion-tab?
Ion-tabs work with global sass styles out of box.

I want to change font color and icon color of third ion-tab. The two others will use primary color.

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="tab 01"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tab 02"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="tab 03"></ion-tab>
</ion-tabs>

How can I achieve this? I added color="secondary" to the third ion-tab but it doesn’t change anything.
I don’t want to change tab’s active color… I’m talking about standard color.

Thanks

2

Use attribute directive provided by Angular.
There is a super example in the doc.
Then you’ll able to apply css style according to the attribute you’ll pass.

1 Like
3

link to the example / doc please?
Ion-tab can’t be styled easily with CSS3. I added css3 styles and then the style applied to the whole section within the tab, not just the tab icon and text.

Thanks

5

I use SVG icons so I just override the default colour:

  page-beer {

    ion-icon {

      &[class*="fa-fas-star"] {
        color: #32db64 !important;
      }

      &[class*="fa-fal-star"] {
        color: #32db64 !important;
      }

      &[class*="fa-fas-star-half"] {
        color: #32db64 !important;
      }

   }

Blue theme (blue Tab Bar icons) green stars:

venue-page--1-
venue-page--1-750×1334 202 KB

Orange theme, green ‘list’ icon (in Tab Bar):

47
47388×679 39.8 KB

See: https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/

1 Like
6

Thanks for your response but how can I change font color?
Is there any way to change font color of a specific ion-tab?
I just want third ion-tab to have font color of green. The other two should stay with primary.

I found out I can change icon’s color by using icon’s css class.
.icon.ion-md-{{ your icon name }} class allows you to change icon color at global level so it will change color of tab menu icon as well… this has to be used in app.scss file with !important attribute.

But there isn’t a way to change font color of tab’s title.

<ion-tab [root]="tab3Root" tabTitle="tab 03"></ion-tab>

any advice would be appreciated.

7

Try:

33
Screen Shot 2018-05-15 at 17.49.33.png1262×448 96.8 KB

1 Like
8

Thanks!

.tabs-md .tab-button-text

will change font color of the entire tab texts.
However how can I change only one tab’s text color?

I added a class to the target tab but it doesn’t work.

  <ion-tab [root]="tab1Root" tabTitle="tab 01"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tab 02"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="tab 03" class="targettab"></ion-tab>

.tabs-md .targettab .tab-button-text { color: green; }

9

Problem solved:
You can use CSS3 pseudo class to select a specific ion-tab and style it in any way you want. I’m surprised there isn’t any documentation for this yet.

.tabbar {
	a:nth-of-type(3) {
   
    color: green;
  background: blue;
	}

}
1 Like