Need help with jQuery-Mobile-Icon-Pack?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

commadelimited
426 Stars 132 Forks Other 119 Commits 4 Opened issues

Description

Extending the default jQuery Mobile icons

Services available

!
?

Need anything else?

Contributors list

# 18,498
CSS
coffees...
present...
slidesh...
85 commits
# 176,539
HTML
Firefox
Chrome
opera
3 commits
# 302,831
HTML
Shell
TeX
2 commits
# 254,390
Gradle
Groovy
C
Terrafo...
2 commits
# 127,771
HTML
CSS
angular...
angular...
1 commit
# 272,757
JavaScr...
jqgrid
CSS
Bootstr...
1 commit
# 595,770
CSS
JavaScr...
1 commit
# 432,306
Shell
CSS
HTML
transla...
1 commit
# 449,422
touchba...
CSS
JavaScr...
1 commit
# 17,975
JavaScr...
CSS
Webpack
webpack...
1 commit

jQuery Mobile Icon Pack

Extending jQuery Mobile's default icon set.

jQuery Mobile Icon Pack is based on based on the Font Awesome library and includes 369 icons from a wide range of categories including currency symbols, media control, social media, common application icons, and more. You can use easily these icons in conjunction with jQuery Mobile's default icon set.

View a demo of Icon Pack.

Build your own custom Icon Pack.

Major upgrade

This version of Icon Pack is a breaking upgrade from previous versions of jQuery Mobile. Previously jQuery Mobile used the

:after
property to apply the PNG icons to the specified container. In jQuery Mobile 1.4 the team chose to look to the future and apply SVG icons with the
background-image
property. In addition to this decision they've inlined the actual file contents of each icon using Data URIs. While this does increase the size of the resulting CSS, it also means there are no external dependencies (not counting the PNG fallbacks).

If you're looking to support jQuery Mobile 1.3 (or lower) applications, you can use the 1.3.x tagged build for that release.

Centered Icons

Every jQuery Mobile app is slightly different. In many cases sizes, and positions, of icons are also different. To that end I've intentionally not applied any sort of alignment or positioning of the icons contained within Icon Pack. This means that in the demos some of the icons might be centered, some of them might be aligned to the left. This is by design (at least for the time being).

If you need to adjust the position of icons in your implementation, here's how you do it. In your CSS, for the icon you'd like to position, add a

background-position
declaration. Here's an example for the
adjust
icon:
.ui-icon-adjust:after {
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 4px 3px;
}

Quick start

Clone the git repo -

git clone https://github.com/commadelimited/jQuery-Mobile-Icon-Pack.git
- or download it. Open up index.html in your browser, preview to your hearts content. The icon definitions are 100% contained within the
jqm-icon-pack-fa.css
CSS file in the
dist
folder within this repository.

If you so desire, run

npm install
and build the icons from scratch by running the
grunt
command.

While this is a good way to get familiar with Icon Pack, it's not recommended that you use this file for production use.

Font Awesome Icon Pack Usage

Drop

dist/jqm-icon-pack-fa.css
and the associated
png
folder into your project. Images are relative to the CSS file. Use them just as you would the standard icons.

My License

Dual license: MIT/GPL

Font Awesome License

The Font Awesome license can be seen on their website.

Bitdeli Badge

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.