How do I add a custom image to a dojo button
here is the sample code for button without image
<div id="zoomin" data-dojo-type="dijit.form.Button">
<span>zoomin</span>
</div>
These answers are close, but the style definition for your icon must include the following:
.myIcon {
background-image: url(...);
background-repeat: no-repeat;
width: 16px;
height: 16px;
text-align: center;
}
You can set an icon class on your widget and then provide the image in css.
<div id="zoomin" data-dojo-type="dijit.form.Button" iconClass="myIcon">
<span>zoomin</span>
</div>
.myIcon {
background-image: url(...);
}
http://dojotoolkit.org/reference-guide/1.7/dijit/form/Button.html#change-the-icon
follow Craig's answer but to conform with 1.7+ and html standards, instead use
<div id="zoomin" data-dojo-type="dijit.form.Button" data-dojo-props="iconClass:'myIcon'">
<span>zoomin</span>
</div>
Or you can decide which through a function override
<div id="zoomin" data-dojo-type="dijit.form.Button">
<script type="dojo/method" data-dojo-event="getIconClass">
var regular = this.inherited(arguments);
// this evaluation will allways be true, but here for sake of argument
return (this.declaredClass == 'dijit.form.Button' ? "myButtonIcon" : regular);
</script>
<span>zoomin</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With