How to customize font size in Ionic Framework

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 ?

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 : enter image description here enter image description here 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.

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!!! :)

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.

I use Ionic for my apps and this is how I deal with resizing:

  1. Find the class/element that you need to modify in CSS
  2. Set padding:0 0 0 0; or to values you want (top,right,bottom,left).
  3. Set font size
  4. Set height
  5. 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;
}