/jquery-ui-iconfont

Icon Font for jQuery UI » Replace PNG-icons of jQuery UI with web font

Primary LanguageCSS

Icons for jQuery-UI

  • 332 unique icons for jQuery UI / jQuery Mobile. All icons are complete drawn by hand and optimized for a minimal size of 14×14 pixels.
  • Resizable and mobile friendly icons.
  • Change the color of icons without generating graphic files.
  • Works with all jQuery UI 1.11.2, 1.11.3, 1.11.4, 1.12 & 1.12.1 themes and jQuery Mobile 1.4.5.
  • Easy to use, no extra plugins or hacks needed.
  • Included CSS3 animation for e.g. AJAX loading status.
  • Icon License CC BY-SA 3.0

No longer maintained

Since there are now better alternatives and frameworks, I have decided to discontinue this project.

Manual

Usage

Include the Icon Font

Copy the file jquery-ui-1.12.icon-font.min.css or jquery-ui-1.11.icon-font.min.css and the folder font into your folder, which holds your CSS-files. You can also rename e.g. jquery-ui-1.12.icon-font.min.css to jquery-ui.icon-font.min.css. For debugging and/or develope you may use CSS-files without .min (e.g. jquery-ui-1.12.icon-font.css).
Add in the <head>-section of your html document a link to the new CSS-file.
For jQuery Mobile it doesn't matter wich file is used, but only jquery-ui-1.11.icon-font is fully tested.

Example Include
  <head>
    <!-- ... -->
    <link href="css/theme/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <link href="css/theme/jquery-ui.icon-font.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui.min.js" type="text/javascript"></script> 
    <!-- ... --> 
  </head>

Note:
The file jquery-ui.icon-font.css and the minified version are for jQuery UI 1.12.x. For jQuery UI 1.11.x or jQuery Mobile please use the jquery-ui-1.11.icon-font.css or the minified version jquery-ui-1.11.icon-font.min.css.

How to use an icon in HTML-markup

To display an icon is really simple:

  <p class="ui-widget-content
    ui-state-default ui-helper-clearfix">
    <span style="float: left; margin-right: 0.5em;"
      class="ui-icon ui-icon-jquery">icon</span>
    ui-icon-jquery
  </p>

Note:
Please only use the class names in the CSS-file to display the required icon and never the unicode value (e.g. "\e601"). I could not guarantee that the entered unicode will show the requested glyph on future releases.

Bugs, features and feedback

Please report bugs or feature requests on the issue-tracker.

Demo

Take a look at the demo under https://mkkeck.github.io/jquery-ui-iconfont/

Screenshot

Screenshot