JSPM

jquery-ui-iconfont

2.3.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 24
  • Score
    100M100P100Q53502F
  • License CC BY-SA 3.0

Icon Font for jQuery UI

Package Exports

  • jquery-ui-iconfont

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jquery-ui-iconfont) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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