It is possible to change the ion-title size inside ion-navbar?

Question

<ion-navbar color="primary">
  <ion-title>Atualizado em: {{ultimaAtualizacao |  date:'dd/MM/yyyy'}}</ion-title>
</ion-navbar>

I want to change the text size of the ion-title, I have already tried using css, but it does not change.

Answer 1

1. If you want to change it for every page of the app, you can use the sass variables. You'd need to add the following in your variables.scss file:

   $toolbar-ios-title-font-size: 1.7rem;
   $toolbar-md-title-font-size: 2rem;
   $toolbar-wp-title-font-size: 1.5rem;
   

   Those are the defaults, so you can set the values that you want there.

2. If you want to change in only in one page, you shouldn't use the sass variables. Instead, use a simple css rule in that page's scss file:

   your-page {
   
     toolbar-title toolbar-title-ios { 
       font-size: 1.7rem;
     }
   
     toolbar-title toolbar-title-md { 
       font-size: 2rem;
     }
   
     toolbar-title toolbar-title-wp { 
       font-size: 1.5rem;
     }
   
   }
   

---

EDIT:

If using the css rules don't work, it may be an issue related to the specificity of those rules. You can try by wrapping the styles of the page like this:

.ios, .md, .wp {

  your-page {

    // Put your css rules here!

  }

}

By doing that, you can improve the specificity of your custom css rules, and overwrite Ionic's css rules.

Answer 2

IONIC 3:

Put this voice on your scss page:

.toolbar-title-md {
    font-size: 1.5rem !important; // Default should be 2.0rem
}