We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add icon on ejButton

Thread ID:

Created:

Updated:

Platform:

Replies:

128716 Feb 7,2017 06:23 PM UTC Feb 20,2017 03:38 PM UTC Angular 3
loading
Tags: General
Agne
Asked On February 7, 2017 06:23 PM UTC

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 [Syncfusion]
Replied On February 8, 2017 09:48 PM UTC

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
Replied On February 20, 2017 06:16 AM UTC

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 [Syncfusion]
Replied On February 20, 2017 03:38 PM UTC

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*/ 
        } 
 
 
Regards, 
Francis Paul A. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;