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/