I can't show any icon on buttons

Thread ID:	Created:	Updated:	Platform:	Replies:
149716	Dec 6,2019 11:18 AM UTC	Dec 10,2019 05:26 PM UTC	Blazor	3

Subscribe to this post

Tags: Button

Ghidarcea

Asked On December 6, 2019 11:18 AM UTC

Hey,

I want to have buttons with icon and text and I tried to use the example from the site:

It doesn't work - instead of an icon, it's just a blank space on the button. I found a similar problem on this forum and I downloaded the "style.css" you provided and included it in my main css file. I attached a zip with the content of my wwwrootfolder. You can see my .css files in there.

Can someone figure out what I'm doing wrong? Thank you.

Attachment: wwwroot_e9546675.zip

Reply | Reply with quote

Madhan Venkateshan [Syncfusion]

Replied On December 9, 2019 09:40 AM UTC

Hi Ghidarcea,

Thanks for contacting Syncfusion support.

We have checked your query. We suggest you to define custom css class (e-play-icon) which contains the icon in the content property and assign the custom css class to IconCss property of the Button control. We have prepared a sample based on your requirement, please refer the below code snippets and sample link.

Sample link: https://www.syncfusion.com/downloads/support/forum/149716/ze/ButtonIcon-1597754379

Index.razor

<EjsButton IconCss="e-icons e-media-play">PLAY</EjsButton> @*predefined class defined in style.css file which contains icons*@

<EjsButton IconCss="e-icons e-play-icon">PLAY</EjsButton>

<EjsButton IconCss="e-icons e-plus-01">ADD</EjsButton>

<EjsButton IconCss="e-icons e-plus-icon">ADD</EjsButton>

<style>

.e-play-icon::before { /*custom class to define icon*/

content: '\e798';

}

.e-plus-icon::before {

content: "\e7ba";

}

</style>

Regards,

Madhan V

Reply | Reply with quote

Ghidarcea

Replied On December 9, 2019 02:08 PM UTC

Thank you!

After I integrated it into my solution I faced this problem: the font-family was affecting all my controls, so I made the following changes in style.css:

.e-btn-icon{

font-family: 'e-icons';

............................................................

-moz-osx-font-smoothing: grayscale;

}

/*span {

font-size: 100px

}*/

Now it looks fine. Thank you again!

Reply | Reply with quote

Madhan Venkateshan [Syncfusion]

Replied On December 10, 2019 05:26 PM UTC

Hi Ghidarcea,

We are happy to hear that your reported issue has been resolved. Please feel free to contact us if you need any further assistance on this.

Regards,

Madhan V

Reply | Reply with quote

CONTACT US

I can't show any icon on buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US