CODEWITHSUNDEEP
jquerycssjquery-ui
nekojsi
nekojsi

Reputation: 1423

How to use the bigger jQuery icons

This answer explains that the jQuery team announced to roll out new icons for their UI components, but I can not find any examples of usage or even where to download them from. Additionally, all the themes in the ThemeRoller seem to offer only icons with the default size.

What is the correct usage of those larger icon sets (if they were officially rolled out and can be easily used at all)?

Upvotes: 12

Views: 24129

Answers (3)

Dustin
Dustin

Reputation: 455

While I agree that vector fonts are the way to go, I work in an environment where the group policy settings prevent our users from downloading these awesome fonts.

If I need an icon larger when using jquery ui, I just implement the zoom property like so:

.ui-icon { 
    zoom: 125%; 
    -moz-transform: scale(1.25); 
    -webkit-zoom: 1.25; 
    -ms-zoom: 1.25;
}

Take note that this will pixelate your icons and offset them the more you zoom in. While it's not the prettiest solution, it works when you need a temporary solution while you finish up a sprite map replacement.

Upvotes: 10

user3634222
user3634222

Reputation: 11

The font scaling isn't working very well for ver FA 4.0 and above.

width: auto;
height: auto;

to the update will help some but not with fonts fa-2x and larger.

Demo: http://jsfiddle.net/LpC4L/

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

I can't find anyway; I think is not still implemented in jQuery UI.

You can move to fontawesome, that support what are you looking for.

If you want to align all the jQuery UI icons with fontawesome look, you can use this css replacement hack:

 /* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" icon-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0;
    /* Bump it up - jQuery UI is -8px */
    margin-top: -0.5em;
}

.ui-button-icon-only .ui-icon[class*=" icon-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

this for the replacement, but you can use directly the fontawesome icons like:

<i class="icon-camera-retro"></i> icon-camera-retro

Great related Q/A: Extend jQuery UI Icons with Font-Awesome

Demo: http://jsfiddle.net/IrvinDominin/bEd2R/

UPDATE

Answer updated for FontAwesome 4.0 that changed a bit the css classes because:

Icons have been renamed to improve consistency and predictability.

Ref: http://fortawesome.github.io/Font-Awesome/whats-new/

Code:

/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" fa-"] {
    /* Remove the jQuery UI Icon */
    background: none repeat scroll 0 0 transparent;
    /* Remove the jQuery UI Text Indent */
    text-indent: 0; 
    /* Bump it up - jQuery UI is -8px */
    margin-top: -0.5em;
}

.ui-button-icon-only .ui-icon[class*=" fa-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

Upvotes: 14

Related Questions