How to customize font size in Ionic Framework - css

Question

I'm using ionic framework (with cordova) to develop mobile apps.
What I want to do is to increase the font size (in general in my app).
I've seen that in the official documentation : http://ionicframework.com/tutorials/customizing-ionic-with-sass/.
But I do not understand how to customize once sass is working.
I'm working in a tabs-based App like that : http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png
I tried to manually add a class on the tab, but the result is not very clean... the text is cropped...
Is there an official way to change the font-size ?

Answer 1

I think you don't need to undersand everything on Sass.
In your project directory, in
.../yourProject/www/lib/ionic/scss
There is a file named _variables.scss where you will see something like this :
These are font-size variables, you just have to change these and then build the ionic css file.
I suggest you to use https://prepros.io/. I hope it helped you.

Answer 2

Figured I'd share what I've learnt in Ionic.
Basically, Ionic has a default set of sizes, colors, fonts for every single thing you can design and this set is stored in the _variables.scss file. This file is at lib/ionic/scss/_variables.scss
Open this file and search for what you want to alter. For example, I needed to increase the header font-size. So I searched in the _variables.scss file and found $bar-title-font-size.
It was defined as $bar-title-font-size: 17px !default;
Now, open your ionic.app.scss file and write something like
$bar-title-font-size: 25px !default;
***Remember to write the above statement before the #import "ionic/scss/ionic"; statement.
Save the file and your changes will instantly take effect. Ionic has made it that simple!!! :)

Answer 3

Search your project/www/css and edit style.css, and inside the file write:
{font-size:55px !important;}
change 55px to whatever size you need.

Answer 4

Often you want to decide when to use which icon size so I came up with the following solution.
CSS
/* Ionicon icons resizing css */
.ion-1x { font-size: 24px !important;}
.ion-2x { font-size: 48px !important;}
HTML
// in iconics framework
<ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
<ion-icon name="logo-twitter" class="ion-2x"></ion-icon>
// without ionics framework
<i class="ion-1x ion-social-pinterest"></i>
<i class="ion-2x ion-social-twitter"></i>

Answer 5

To make responsive font-size according to device for ionic2,
Add this in src/theme/variables.scss
// breakpoint mixin
#mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
#if $mq2 == false {
#media ($maxmin: $mq01) {
#content;
}
}
#else {
#media (min-width: $mq01) and (max-width: $mq2) {
#content;
}
}
}
// breakpoint variables
$lg: 1170px;
$md: 1024px;
$sm: 640px;
$xs: 480px;
// responsive font size mixin
#mixin font-size-map($font-size-map) {
#each $breakpoint, $font-size in $font-size-map {
#if $breakpoint == null {
font-size: $font-size;
} #else {
#include breakpoint($breakpoint) {
font-size: $font-size;
}
}
}
}
// font sizes
$html-font-size: (null: 16px, $md: 15px, $sm: 14px, $xs: 13px);
$paragraph-font-size: (null: 18px, $lg: 17px, $md: 16px, $sm: 15px, $xs: 14px);
include variable in local scss by adding: #include font-size-map($html-font-size);
// html
html {
#include font-size-map($html-font-size);
}
p {
#include font-size-map($paragraph-font-size);
}

Answer 6

Newer versions of Ionic (4 + 5) use CSS variables.
However, there is no variable for the font size. So, you can add a line like this to variables.css:
body ion-content {
font-size: 1.25rem;
}
Further reading
Global styling in Ionic apps
Setting a font family in an ionic app

Answer 7

I use Ionic for my apps and this is how I deal with resizing:
Find the class/element that you need to modify in CSS
Set padding:0 0 0 0; or to values you want (top,right,bottom,left).
Set font size
Set height
Set line-height
Edit: This is how I modified my tab items
.tab-item{
margin: 0;
line-height: 100px;
box-sizing: content-box;
font-size: 40px;
color:#FFFFFF;
font-family: 'Roboto-Light';
opacity: 1;
max-width: 200px;
}