jQuery Mobile - Navbars 3rd Party Icon


You can add third party icons to your navbar. To achieve this, just add custom styles to link to the icons and place them in the navbar.


Following example demonstrates the use of navbars 3rd party icon in jQuery Mobile.

<!DOCTYPE html>
      <title>Navbars 3rd Party Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
         .nav-glyphish-example .ui-btn { 
            padding-top: 40px !important; 
         .nav-glyphish-example .ui-btn:after { 
            width: 30px!important; 
            height: 30px!important; 
            margin-left: -15px !important;
         #home:after { 
            background: url("/jquery_mobile/images/home.png") no-repeat;
         #notify:after { 
            background: url("/jquery_mobile/images/notifications.png") no-repeat;
      <div data-role = "footer" class = "nav-glyphish-example" data-theme = "a">
         <div data-role = "navbar" class = "nav-glyphish-example" data-grid = "a">
               <li><a href = "#" id = "home" data-icon = "custom">Home</a></li>
               <li><a href = "#" id = "notify" data-icon = "custom">Notifications</a></li>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as navbar_3rd_party_icons.html file in your server root folder.

  • Open this HTML file as http://localhost/navbar_3rd_party_icons.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started