Resizing Icons in jQuery-UI

Question

I find the icons in jquery UI to be a bit small for my application. Adjusting the sizes on .ui-icon doesn\'t help of course, because the images are loaded from a single im

Answer 1

Try this http://mkkeck.github.io/jquery-ui-iconfont/

sources: https://github.com/mkkeck/jquery-ui-iconfont

Its need to include only jquery-ui.icons.css and the fonts dir.

The jquery icons size can be changed like this:

<style type="text/css">
    .ui-icon {
        font-size: 1.2em;
    }
</style>

Answer 2

No. Because the icons are packed into a CSS sprite grid, you will only see the icons around it if you try to make the icon itself bigger (as you saw). You could increase the "size" of the icon by adjusting margin - but this won't make the graphic bigger - just the space it takes up.

Edit - Looks like the jQuery UI team has heard this complaint before and is going to roll out some larger icons in the next release of jQuery UI.

Answer 3

Note that you can really use any icon you want as long as you create a CSS style that uses it, and it doesn't have to be in a sprite pack. The "icon name" in jQuery UI Buttons is really just a class name.

The blog "Sit Down Waldo" has good example here. It demonstrates using the most excellent FAMFAMFAM color icon set, but you can really use his "core" to adjust positioning and then use any icon you want in your own CSS.

Using his example is quite easy just download the files (you only need the css and icon folders), then add these lines to your HTML file

<link href="libs/famfamfam/css/fff.icon.core.css" type="text/css" rel="stylesheet"/>  
<link href="libs/famfamfam/css/fff.icon.icons.css" type="text/css" rel="stylesheet"/>

then use one of the icon names in your options.
{icons: {primary: 'fff-icon-connect'},text: false}

PS, It unfortunately doesn't look like the new sizing options for the jQuery UI has happened yet even though they talked about it 7 months ago. They did make them a tad bigger, but they didn't introduce a whole new size.

Answer 4

It is an old problem, but here is my solution (hack if you prefer):

.ui-icon-circle-close {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Chrome, Safari, Opera */
  transform: scale(2);
}

For an icon-only button it works great.