CODEWITHSUNDEEP
angulartypescriptionic-frameworksassionic3
Ileana Profeanu
Ileana Profeanu

Reputation: 387

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

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:

enter image description here

Upvotes: 8

Views: 45452

Answers (6)

Nibia
Nibia

Reputation: 324

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

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

Upvotes: 1

Divek John
Divek John

Reputation: 755

Using appropriate HTML element will also solve your problem for example

    <ion-item>
      <ion-text>
        <h2> {{product.name}}</h2> // BIG
        <h3> {{product.category}}</h3> // MEDIUM
        <h4> {{product.price}}</h4> // SMALL
      </ion-text>
    </ion-item>

Upvotes: 0

Phil
Phil

Reputation: 7566

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>

Upvotes: 6

olivier cherrier
olivier cherrier

Reputation: 274

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.

Upvotes: 2

Shahab Rauf
Shahab Rauf

Reputation: 3931

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

Upvotes: 2

Sampath
Sampath

Reputation: 65870

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

Upvotes: 12

Related Questions