View source to see how these examples work


These icons are added based upon the image named in the data-icon attribute of the tags (attribute is configurable).

Inline icon

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Class applied to list items


Alternate image path

By default, icons are expected to be in the "icons" directory. This can be changed via the iconPath option.

This icon image is located in the "alternate-path-example-icons" directory.

Alternate attribute to get filename

By default, the icon filename is expected in the data-icon attribute. This can be changed via the iconAttribute option to use a different attribute.

This icon was retrieved via the href attribute of the link.

Alternate class automatically applied to matching elements

By default, the jquery-icon class is automatically applied to any matching elements. This can be changed via the iconClass option.

This icon has a different class automatically applied. Obviously a css rule for "alternate-class" is needed.

Default extension set in configuration

By default, it is necessary to provide the full icon filename. However, if you know that all icons will be of a specific file type (ie .gif), you can set a default extension. This will allow you to specify the icon via the name without the extension.

This icon was specified without the extension.