How to set font size for one item in a list?

Ionic Framework ionic-v3
1

Hi everyone!

I want a larger font size for one item in my ion-list. How to do this?

<ion-list class="center-content">
  <ion-item text-wrap text-center style="font-size: 4rem">
    session.title
  </ion-item>
</ion-list>

Thanks!
Fred

2

$item-md-body-text-font-size in the variables.scss file did the trick!

3

As far as I understand, overriding $item-md-body-text-font-size in the variables.scss will change font size for ion-items globally. Right? Or am I missing something?

What’s solution then if you need to set font size for particular ion-item, not globally for the app?

Thanks.

4

Just add a custom class for that item. And assign the font-size as desired.

5

It’s exactly what I did. My class looks like this:

.custom-font-size {
    font-size: 2.0rem;
    font-weight: bold;
  }

When I apply this class to a particular item, 2 things happen:

  1. font-weight works fine, i.e. text becomes bold;
  2. Font size doesn’t change.

Any ideas?

Thanks.

6

Check your css with the Chrome dev tool. Maybe some other class overrides your font-size.