Add icon on ejButton

[Agne]

Hello,

I am trying to add icon (picture from my own source) on ejButton control. I was trying to initialize component like this:

$("#searchByItemCodeButton").ejButton({
contentType: "textandimage",
prefixIcon: "e-icon e-handup",
text: "GO",
});

The text on button is visible, but icon is not.
Also I tried to use contentType: "imageonly" and in prefixIcon my own picture, but this is not working too.

What I need to do to make my picture appear on button?

[Francis Paul Antony Raj]

Hi Agne, 

 

Thanks for contacting Syncfusion Support. 

 

You can add the custom fonts by including the corresponding CSS file as mentioned in the provided JSPlayground sample. http://jsplayground.syncfusion.com/2xeets1k  

 

In the above sample, we have referred the Bootstrap theme file and then added the Bootstrap font icon as a prefix icon in ejButton. 

 

Also, we have provided icon templates in Metro Studio. By customizing this templates, you can create lot of unique icons and utilize it in your application. 

 

Regards, 

Francis Paul A. 

[Agne]

Hello,

is there a possibility to add my own picture (that is located in project or somewhere in the internet, for example http://www.clipartkid.com/images/582/image-arrow-cliparts-co-4qvQAt-clipart.png) on the button? Or I just need to put it using only html and css?

[Francis Paul Antony Raj]

Hi Agne, 

 

Yes, you can add the image (.png, .jpg) files to the ejButton control as prefix icon. Please refer the below code example.  

 

[html] 

<label for="searchByItemCodeButton">Button</label> 

<button id="searchByItemCodeButton"></button> 

 

[script] 

$("#searchByItemCodeButton").ejButton({ 

     contentType: "textandimage", prefixIcon: "customImageClass", text: "GO", size: "large",  

     cssClass: "customClass" /*to customize the existing styles*/ 

 

}); 

 

[style] 

        .customImageClass 

        {            

            vertical-align: middle;      

            padding: 2px 6px 2px; 

            content: url('http://www.clipartkid.com/images/582/image-arrow-cliparts-co-4qvQAt-clipart.png'); /*image*/ 

            height: 18px; /*image height*/ 

            width: 32px; /*image width*/ 

        } 

        .customClass.e-btn .e-btntxt  

        { 

            display: inline-block; /*existing style has been overridden*/ 

        } 

 

Sample Link: http://jsplayground.syncfusion.com/sjmsh23r  

 

Regards, 

Francis Paul A.