Fork me on GitHub

With jQuery Mobile Icons, we can place icons on our menu links.

Only an Icon, no Text

Using data-iconpos="notext" allows us to have a menu link that just show an icon.

Region Menu Link with no Text

In the example above, we have a region menu link to the home page, and we only show the "home" icon. Here's how that is done:

// Header Region Links
drupalgap.settings.menus.regions['header'] = {

    /* ... other links ... */

    /* Home Button */
      path: '',
      options: {
        attributes: {
          'data-icon': 'home',
          'data-iconpos': 'notext',
          'class': 'ui-btn-left'
      pages: {
        value: [''],
        mode: 'exclude'


Font Awesome Icons

Relative to your app's www directory (not your Drupal site's www directory):

mv jQuery-Mobile-Icon-Pack-master/dist/ .
rm -rf jQuery-Mobile-Icon-Pack-master

Add this to your index.html file:

<link rel="stylesheet" href="dist/jqm-icon-pack-fa.css" />

Now you can use the data-icon attribute as usual. Here's a list of the icons in action.

For more information: