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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Angular
  4. imageUrl resize with spriteCssClass

imageUrl resize with spriteCssClass

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!

1 Reply
KR Keerthana Rajendran Syncfusion Team June 12, 2017 12:53 PM UTC

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 
 
 
 
Regards, 
Keerthana.

Loader.
Up arrow icon