imageUrl resize with spriteCssClass

[Me]

Hey,

Trying to add icons and need to resize them to appropiate size. Looks like I'm not able to change size of icons added via imageUrl, so tried to use spriteCssClass and use there 'background-image', but it seems that spriteCssClass won't see my css class at all.

Any suggestions, how can I add icons into ejMenu and set appropiate size via CSS?


Thanks,
M!

[Keerthana Rajendran]

Hi Me, 

 

Thank you for contacting Syncfusion support 

 

Css for sprite images can be customized by the user as per the requirement using class name. We suggest you to use media query in stylesheet to apply css to sprite class on resize. Please refer to the below code 

<ej-menu id="menu" height="30px" [fields.dataSource]="data" [fields]="fieldsvalues"> 

</ej-menu> 

<style> 

[class^="sprite-"], 

 [class*="sprite-"] { 

            background-image: url("../src/content/images/menu/mailicons.png"); 

            height: 33px; 

            left: 2px; 

            top: 4px; 

            width: 33px; 

                                     

 

        } 

  .sprite-calendar { 

            background-position: -25px -255px; 

        } 

 

        .sprite-contacts { 

            background-position: -26px -429px; 

        } 

 

        .sprite-deleted { 

            background-position: -24px -152px; 

        } 

 

        .sprite-drafts { 

            background-position: -24px -83px; 

        } 

 

        .sprite-folder { 

            background-position: -24px -464px; 

        } 

 

        .sprite-folders { 

            background-position: -24px -222px; 

        } 

 

        .sprite-inbox { 

            background-position: -25px -13px; 

        } 

 

        .sprite-junk { 

            background-position: -23px -187px; 

        } 

 

        .sprite-notes { 

            background-position: -26px -394px; 

        } 

 

        .sprite-outbox { 

            background-position: 0 -414px; 

            width: 16px; 

            height: 16px; 

        } 

 

        .sprite-root { 

            background-position: -25px -49px; 

        } 

 

        .sprite-sentitems { 

            background-position: -26px -118px; 

        } 

 

 

 @media (min-width: 320px) and (max-width: 480px) { 

        [class^="sprite-"], 

        [class*="sprite-"] { 

            background-image: url("../src/content/images/menu/mailicons.png"); 

            height: 15px; 

            left: 2px; 

            top: 4px; 

            width: 15px; 

            

        } 

} 

</style> 

 

 

 

We have prepared sample for reference. Please refer to the below given link 

 

Sample: Sample114109842.zip 

 

 

Regards, 

Keerthana.