CODEWITHSUNDEEP
ionic-frameworkionic4
Citizen
Citizen

Reputation: 12947

How do I change font weight for ion-button in Ionic 4?

In Ionic 4, I know that for some things I'm supposed to use shadow dom, and modify components like this:

ion-button {
  --ion-font-family: 'Montserrat', sans-serif;
  --border-radius: 8px;
}

But what if I want to change the font weight of the button?

If you look at the css for the button, you'll see that there's no shadowdom css variable for weight like there is for padding or font-family:

.sc-ion-buttons-md-s ion-button {
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-start: 8px;
    --padding-end: 8px;
    --box-shadow: none;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
}

The only way I can do it as far as I can tell is to do inline styling like this:

<ion-button color="primary" fill="solid" shape="round">
  <p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>

But now I feel like its 1996 all over again. What's a clean way to do this?

Upvotes: 1

Views: 11507

Answers (1)

Juan
Juan

Reputation: 118

i added:

ion-button {
    font-weight: 700;
}

to one of my random projects and it works as expected.

i then added the <p> </p> tags like you have in your example code inside my button with the text for the button and the font-weight no longer effected the text.

maybe remove the <p> </p> tags if you are using them then try again.

Upvotes: 3

Related Questions