change font size of ion-label in a single page - Ionic

Question

I want to change the font size of a ion-label in the home page of a ionic app. I have read that I can change the font size variables in the __variables.scss file, which could affect the ion-label. I think I could do that. But I find it strange that it doesn't work to style the ion-label in the scss file associated with the page. I have searched online but I couldn't find anything about it, other than that my approach should work.

This is my scss:

$primary-color: #cf810c;
$bg-color: #CCFFFF;

page-home {
    .masters{
        background-color:$bg-color;
    }
    ion-label{
        color: $primary-color;
        font-size: 4em;
   }
}

And this is the content in my html file:

<ion-content padding class="masters">
  <ion-label stacked>Tap and press the buttons to win!</ion-label>
</ion-content>

My page looks as follows:

Solution 1

You just need to do like this:

This is working stackblitz

my-page.html

  <ion-label stacked class="my-label">Tap and press the buttons to win!</ion-label>

my-page.scss

.my-label {
  font-size: 4em;
}

Solution 2

I discourage from using own font-size values/classes like in the other answers. Ionic has a defined font-size, which it scales for defined h1, h2, ..., small and other tags; see here: https://github.com/ionic-team/ionic/blob/master/core/src/css/typography.scss#L34

I suggest you just wrap one of those tags with <ion-label> in order to have consistent font-values across your app:

<ion-item
    <ion-label>
        <small>Foo Bar</small>
    </ion-label>
</ion-item>

Solution 3

You can add a class to your label and edit it in CSS.

Html

<ion-label class="testclass">Your Label</ion-label>

CSS

.testclass{ font-size: 30px !important; }

Solution 4

Sorry but answers of Sampath and Shahab Rauf does not work for me: Ionic 4 and angular 5.

Below another proposition:

HTML:

  <ion-label stacked >
      <p class="my-label">Tap and press the buttons to win!</p>
  </ion-label>

SCSS:

page-my-page {
    .my-label {
        font-size: 8em;
      }
}

Here, not required to add the SCSS file into styleUrls attribute of Angular component or into app.scss.

Hope it could help.

Solution 5

You can also globally change all labels font adding in global.scss

ion-label {
  label {
   font-size: 1rem!important;
  }
}

View more solutions