How to increase font size of loading icon using fontaweseome

Question

How to change loading jqgrid icon with fontawesome icon?I am able to get that icon but size is by default it is displaying so how to increase the size of fontawesome icon? I have written following code

$grid = $("#list1");
$pager = $grid.closest(".ui-jqgrid").find(".loading")
        .removeClass("ui-state-default ui-state-active")
        .addClass("fa fa-spinner");

Even tried by giving class as fa fa-spinner fa-spin fa-3x fa-fw .I have not written any CSS for that jqgrid loading .Hence not getting how to do that.

Using jqgrid version 4.7 . Fiddle link https://jsfiddle.net/w26n2be0/

Answer 1

Simple CSS should do it:

.fa-spinner{
font-size: 40px !important;
}

change the 40px to any font size you like.

The CSS above should work and the only reason it might not work is that IF there are other CSS that override the this CSS OR you have this CSS code above/before other CSS styling in your page.

You could also have something like this:

$grid = $("#list1");
$pager = $grid.closest(".ui-jqgrid").find(".loading")
        .removeClass("ui-state-default ui-state-active")
        .addClass("fa fa-spinner")
        .css('font-size', '40px !important');

Answer 2

You can use fa-lg , fa-2x , fa-3x , fa-4x , fa-5x in class definition

$grid = $("#list1");
$pager = $grid.closest(".ui-jqgrid").find(".loading")
        .removeClass("ui-state-default ui-state-active")
        .addClass("fa fa-spinner fa-3x");