用本地圖像替換jquery UI圖標

我有一個上下文菜單，我在其中添加了一些東西。我也想使用jquery ui圖標樣式在我的菜單上顯示圖標，因爲它可以很好地在jquery菜單上進行調整。我目前已經添加了一個時鐘圖標。但我想用我自己的圖像替換它，同時仍然使用jquery ui圖標樣式。我怎樣才能做到這一點？這是在我加入圖標和其他文本到我的菜單代碼：用本地圖像替換jquery UI圖標

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; 
    };

來源

2017-08-09 Salman

Em ...更改類並用CSS定義類？ –

你能舉個例子嗎？ – Salman

在jQuery UI的icons.css cdn link

使用這個類：

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

並替換與內容的圖像。您可以嘗試添加背景以及其他適當的樣式。

======更新========：

定義自己的風格，就像這樣：

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

就用.ui-icon-custom更換

這時候假設您的自定義圖標位於CSS下面的圖像文件夾中......與jQuery UI圖標地圖通常位於同一位置。當圖標的創建它得到這樣的一類：class="ui-icon ui-icon-custom"，而ui-icon類看起來是這樣的（可能是不同的圖像，這取決於主題）：

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

所以在你的風格你只是覆蓋該背景 - 圖像，如果需要更改寬度，高度等

來源

2017-08-09 12:18:41 HEGDE

它似乎不適合我。當我這樣做時，我只是看到菜單上的「向上」箭頭而不是時鐘，而不是我的圖像。你知道可能是什麼問題嗎？ – Salman

@Salman我已經更新了答案，它對我來說工作正常。看一看 – HEGDE

你在哪裏定義風格？在你自己的單獨的CSS文件或在jquery-ui.css？我在jquer-ui.css中定義它，但沒有得到想要的結果。另外你在哪裏創建.ui-icon圖標體？ – Salman

用本地圖像替換jquery UI圖標

回答

相關問題