How to increase default 16px size from jQuery-UI icon set?

Question

I want to increase the size of jQuery icons from 16 to 24px.

Answer 1

im pretty sure that the icons are packed in a css sprite grid, so can not be more ... the only thing I could think of was to add a margin around it, but then the icon would still be small in the middle of the larger empty space.

or even open a sprite and make more icons!;)

Here I would try (you still have to edit your sprite sheet, but I'm sure that soneone descent with photoshop can make it easier:

function getPos(X,Y,Size) { var posJson = { posX:0,posY:0 }; posJson.posX = X*-Size; posJson.posY = Y*-Size; return posJson; } $(document).ready(function(){ var Pos = getPos(0,1,16); $(".ui-icon-carat-1-n").css("background-position",Pos.posX+"px "+Pos.posY+"px"); }); 

Answer 2

You can add CSS-style scaling, although this does not work in all browsers, for example.

 .zoomClassPercent { zoom:150%; } .zoomClassRatio { zoom:1.5; }