Question

In ASP.NET MVC3, how do I access the user interface icons which are included in the default package. They are located in the ~/Content/Themes/Base/Images, however, they are in an image map. An answer or link will work, just unsure of how I am supposed to integrate them and could not find an answer searching google or SO.

Answer 1

You’d do something like this:

.ui-icon { 
    width: 16px; 
    height: 16px; 
    background-image: url(images/ui-icons_469bdd_256x240.png); 
}

That would be a generalized icon CSS class to indicate it as an icon and set the inheriting properties of width and height, as well as the grouped image to map icons off of. Then you’d reference each like so, using mapping:

.ui-icon-someIcon { 
    background-position: -32px -16px; 
}

And then you could apply this to a DOM element:

<span class="ui-icon ui-icon-someIcon"></span>