Change font size for text

Question

Is there an easy way to change font size for some none-header text with Semantic-UI, without make changes to the theme or use plain css?

I see for some elements, like button, one could use large, massive and so one. Perhaps something like this is possible for "normal text" also, but I cannot in the documentation see how, but I might be blind?

Wirephoto

Answer 1

Semantic UI does not have that out of the box. You can write a CSS class that does it for you.

.large.text {
   font-size: 2rem;
}

This would make <p class="large text">Hi there</p> have a size that is twice the size of the baseline text size.

Pozzuoli

I needed to add !important to my css for it to work (ie. font-size: 2rem !important;) – Cyclops

Answer 2

You can also add your own CSS to component's .overrides file for the theme you are using and it will be available in your app.

For example, if you are using 'default' theme, you can add the following to button.overrides :

.large.text {
    font-size: 12px;
}

site.variables contains the default font size of the page, it can be changed there as well if it's to be changed everywhere

Abroach

Answer 3

It is possible to be done in Fomantic-UI from version 2.7.2.

Fomantic-UI is a fork of Semantic-UI with ongoing development.

<span class="ui large red text">example of large text</span>

docs: https://fomantic-ui.com/elements/text.html

Cohn