jqueryui themeroller

我正在學習jQuery UI中的框架圖標。jqueryui themeroller

<span class="ui-icon ui-icon-circle-minus"></span>

在圓圈內產生負號的圖標。
使用ThemeRoller Firefox Bookmarklet，我可以將圖標的顏色更改爲紅色（使其看起來像是一個刪除按鈕）。

問：如何讓一個jQueryUI圖標變成紅色而另一個變成另一種顏色？

<span class="ui-icon ui-icon-circle-plus"></span>

我想使這個綠色。

另請參閱此問題：http://stackoverflow.com/a/19121287/276093 – 2015-06-05 09:37:49

使用ui-state-...類可以使用圖標更改元素的狀態。您需要設計主題，以便處於不同狀態（高亮，懸停，活動，錯誤，默認）的項目具有不同的顏色。

<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>

我建議不要使用這種狀態（只是爲了改變顏色，就是這樣）。我會在語義上使用這些狀態，並根據需要讓圖標呈現與狀態一致。如果我特別需要紅色/綠色圖標，我會將這些圖標專門生成爲圖像，並直接直接使用它們，而不是試圖設計主題，以便爲這些圖標獲取不同的顏色選擇。

對於它的價值，我認爲FamFamFam Silk圖標與jQuery UI很好地結合在一起。

2010-04-06 21:49:52 tvanfosson

感謝您提供關於FamFamFam的提示。 – 2010-04-06 22:22:40

關於Silk + jQuery UI集成如何完成，您有沒有更多的細節？ – Armand 2010-08-31 13:38:20

@Alison - 整合可能是錯誤的詞。我實際上並沒有在jQuery UI組件中使用Silk圖標，而是在jQuery UI組件旁邊使用圖標。從設計角度來看，他們看起來很好。 – tvanfosson 2010-08-31 15:01:15

你不能這樣做，至少不能在ThemeRoller的情況下。 Themeroller使用一個精靈圖像...這是一個包含所有圖標的大圖像。

你可以製作另一個主題，它是Spritemap圖像到你的圖像文件夾，並進入你的jQuery UI CSS並更改.ui-icon-circle-plusbackground-image屬性。

它應該是這樣的：

.ui-icon-circle-plus { background-position: 0 -192px; }

那就需要看起來像這樣：

.ui-icon-circle-plus { 
    background-image: url(RedIcons.png); 
    background-position: 0 -192px; 
}

你可以看一下.ui-icon樣式它目前使用的圖像。

2010-04-06 21:48:28

我認爲ThemeRoller會爲每個狀態產生不同的精靈。無論如何，我的主題中有5個獨立的圖標精靈。根據您設置狀態的不同，精靈的顏色會有所不同。 – tvanfosson 2010-04-06 21:51:22

@tvan - 不錯，但只有當他的某個狀態已經是紅色時...在這種情況下，如果他總是想要減號紅色，仍然是同樣的解決方案，請更改該元素的背景圖像（他已經擁有圖像這種情況...比編輯小部件還要容易得多）。 – 2010-04-06 21:56:02

回答