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

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">


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

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?


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

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?


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