Sunday, January 15, 2012

Add custom icon to dojo button in XPages

Adding icon to a dojo button is pretty simple. Jut set the dojo type to dijit.form.Button and add a dojo attribute named iconClass with value dijitEditorIcon dijitEditorIconCut.


And you get something like this:

But what if you want your own custom icon to appear on the button? The Dojo Themes and Theming Documentation explains about using custom icons. First of all import the icon image in your database. Now create a style sheet with following CSS class.


Make sure you set the width and height to same as the width and height of the icon. Now just use this class in the iconClass dojo attribute of the button. Here is the sample source for the button:


So now your button will look something like this:
Additionally you can use image sprites to put icons this way.

No comments:

Post a Comment