Use Font-Awesome Icons with Jquerymobile 1.4

by Varun Nath

HTML

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

<div data-role="page">
    
    <div data-role="header">
        <h1>Header</h1>
    <a href="#home">
        <i class="fa fa-home fa-fw"></i>
    </a>
    </div>
    
    <div data-role="content">

    
<a href="#" class="ui-btn show">Show</a>

<a href="#" class="ui-btn hide">hide</a>
        
    </div>
    
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>        
    </div>
</div>

JavaScript

$(document).on("mobileinit", function() {
            $.mobile.loader.prototype.options.html = '<i class="fa fa-spinner fa-5x fa-spin"></i>';
        });


$(".show").on("click", function () {
    $.mobile.loading("show");
});
$(".hide").on("click", function () {
    $.mobile.loading("hide");
});