CODEWITHSUNDEEP
jqueryhtmlcss
Salman
Salman

Reputation: 431

Replace jquery ui-icon with a local image

I have a context menu in which i am adding stuff on the fly. I also want to display icons on my menu using the jquery ui icons styling because it adjusts itself nicely over the jquery menu. I currently have added a clock icon. But I want to replace it with my own image while still using the jquery ui icons styling. How can I do that? Here is the code in which I am adding the icon and other text to my menu: 

var getMenuItem = function (itemData) {
        var attr = $("<a>", {"class": "textStyle",
            title : itemData.name,
            html : itemData.name
        }) 
        var item = $("<li>")
            .append(attr);
        if (itemData.name=='concepts') {
            attr.append($("<i>", {"class":"ui-icon ui-icon-clock"}))}
        if (itemData.children) {
            var subList = $("<ul>");
            $.each(itemData.children, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

Upvotes: 0

Views: 640

Answers (1)

HEGDE
HEGDE

Reputation: 511

In Jquery Ui icons.css cdn link

use this class :

.ui-icon-clock:before {
content: "\e023";!important
}

And replace your image with content. you may try adding background as well with other proper styling.

======Updated======== :

Define a style yourself, like this:

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

Then just use .ui-icon-custom when replacing

This assumes that your custom icon is in the images folder beneath your CSS...the same place as the jQuery UI icon map typically is. When the icon's created it gets a class like this: class="ui-icon ui-icon-custom", and that ui-icon class looks like this (maybe a different image, depending on theme):

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

So in your style you're just overriding that background-image, if needed change the width, height, etc.

Upvotes: 1

Related Questions