Ej1 Ribbon Button Icon

Question

Hi,I am implementing Ej1 tab in my project. Since I didn't find any relevant icon in the icon package, hence I wish to insert my own icon as the button icon but I don't know how to implement it. Can you show me the way of doing it ?Thanks in advance.

Sharon Sanchez Selvaraj · Accepted Answer

Hi Bai, 
 
Greetings from Syncfusion Support.  
 
We checked with your requirement and suspect that you need to insert your own icons for button with EJ1 Ribbon header.  
 
We have created a Ribbon sample with Font Awesome icons by specifying the font-family and the content CSS over here for “New” button. Similarly, you can implement any icon of your preference for the required icon. We have modified the New icon using the below CSS. 
 




.e-btn-span .e-icon.e-ribbon.e-new:before { 
        font-family:'FontAwesome'; 
        content: '\f15b'; 
    } 
 
Refer to the stylesheet link used. 
 




 <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css> 
 
 
Refer to the sample. 
 
https://www.syncfusion.com/downloads/support/forum/166083/ze/Ribbon-Icons-1455610181.zip 
 
If we have misunderstood your query, kindly provide us additional details on your exact requirement to serve you better.  
 
Regards, 
 Sharon Sanchez S.

Bai Yuan · Answer

Thanks a lot!

Keerthana Rajendran · Answer

Hi Bai, 

Most welcome. We are happy that the provided suggestion helped you. Please get back to us if you need further assistance. We will be happy to assist you. 

Regards, 
Keerthana R.