CODEWITHSUNDEEP
jquerycssjquery-ui
woggles
woggles

Reputation: 7444

Use external icon for JQueryUI

Is there an easy way to use an external icon for JQuery UI?

Say I have the following icon on a button: 

  <script type="text/javascript">
    $(document).ready(function () {
        $('#aButton').button({
            icons: 
            {
                primary: "ui-icon-newicon"
            }
        });
    });
</script>

<button id="aButton">hello</button>

Is it possible to display an external jpeg or png? What is the easiest was to do this without editing the existing JQuery UI png files?

I have previously managed to achieve this by manually editing and replacing an icon that I don't use in the ui-icons_xxxxxx_256x240.png files which works great until I upgrade to a new version of JQuery UI using nuget and the png files are replaced.

Edit:

Created this class in my Site.css (its a ASP.NET MVC3 app) and needed to add the !important flag. Didn't have any issues with state (when the button is highlighted, hover etc).

.ui-icon-newicon
{
    background-image: url(images/delete.png) !important;
    background-position: 0 0;
}

Upvotes: 0

Views: 453

Answers (2)

Alnitak
Alnitak

Reputation: 340055

Sure, just add your own file and supply a CSS class for that specific button, something like:

#aButton.ui-icon-custom {
    background-image: url(...);
    background-position: 0 0;
}

Upvotes: 1

Tomer
Tomer

Reputation: 17940

You can do it by defining your own style for that class in your css:

.ui-icon-locked { background-image: url(images/custom.png); }

Upvotes: 1

Related Questions