CODEWITHSUNDEEP
jquery-mobilefont-awesome
Tom Schreck
Tom Schreck

Reputation: 5287

How to use Font Awesome's spinner with jQuery Mobile

I'm trying to use Font Awesome's spinner as a replacement for jQuery Mobile's loader. Here's my code:

        <script type="text/javascript">
            $(document).bind('mobileinit', function ()
            {
                $.mobile.loading("show",
                {
                    text: "",
                    textVisible: false,
                    theme: "z",
                    html: "<i class='fa fa-spinner fa-5x fa-spin'></i>"
                });
            });
</script>

This doesn't work. What am I doing wrong? If i put the "i" tag containing the fa-spinner in the page itself, then I can see the spinner. It's just not getting included with JQM (I'm using JQM 1.4.0)

Upvotes: 3

Views: 2658

Answers (1)

Omar
Omar

Reputation: 31732

You have two options, either globally change jQM default spinner, or change it on request.

  1. Globally:

    Override loading widget options on mobileinit. This will replace default options once and for all.

    <head>
  <link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
  <link rel="stylesheet" href="font-awesome.css" />
  <script src="jquery-1.9.1.min.js"></script>
  <script>
    $(document).on("mobileinit", function() {
      $.mobile.loader.prototype.options.html = '<i class="fa fa-spinner fa-5x fa-spin"></i>';
    });
  </script>
  <script src="jquery.mobile-1.4.0.min.js"></script>
</head>

    Demo

  2. On request:

    $.mobile.loading("show", {
  html: '<i class="fa fa-spinner fa-5x fa-spin"></i>'
});

    Demo

Upvotes: 3

Related Questions