如何指定（忽略）JQuery圖標顏色

我一直在使用我的web應用程序中的jQuery圖標，但已經到了一個地步，我想使用一種我無法實現的顏色默認。我目前正在使用主要使用綠色的「州街」主題。但是我有一個帶有白色文本的紅色框，並且想要使用白色的圖標。主題提供了白色圖標，但只有當圖標位於具有「ui-state-focus」類的div（或其他容器）內時纔會應用它們。這會使圖標變成白色，但會將背景顏色更改爲綠色，我想將其留爲紅色。如何指定（忽略）JQuery圖標顏色

有沒有什麼辦法（很可能通過CSS）來重寫jQuery使用的圖標背景圖片，以便我可以使用不同的顏色？

謝謝。

澄清：我想這會幫助我後，我目前正與HTML：

<!-- currently produces a default 'grey' icon color --> 
<!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div --> 
<div id="errorMessage"> 
    <span class="ui-icon ui-icon-alert" style="float: left"></span> 
    Only 1 Activity can be added at a time 
</div>

我也有CSS：

.dialog #errorMessage 
{ 
    /*display: none;*/ 
    background-color: #CC3300; 
    color: #FFFFFF; 
    font-weight: bold; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    vertical-align: bottom; 
    bottom: auto; 
    font-size: .80em; 
    width: 100% 
}

「顯示：無」目前已被註釋掉，所以我可以看到它。我確實設置了淡入淡出。再次感謝您的幫助。

來源

2009-11-30 Matt Powell

這個問題很相似到http://stackoverflow.com/questions/2588558/jqueryui-themeroller – 2011-03-14 20:11:53

可以覆蓋與下面的CSS圖標：

.ui-icon 
{ 
    background-image: url(icons.png); 
}

您也可以下載圖標png文件以任何你喜歡的顏色。只要改變顏色部分在以下網址：

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

例如，如果你想紅的圖標，以及寶藍色的圖標，你需要的網址是：

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png 
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

Red Cornflower Blue

等

（但不要使用URL作爲CDN，是不錯的，從本地文件保存）

來源

2013-10-01 16:23:59

如果你只想在某些地方使用顏色圖標，並保留其餘的默認值，你可以設置你的css類爲：ui-icon.redIcon {background-image：url（themes/altIcons/redIcons.png）; }並在html中使用類「ui-icon-check redIcon」引用它。 – 2014-02-05 15:54:06

我需要：「ui-icon ui-icon-check redIcon」 – kyle 2014-07-20 21:49:48

瞭解使用最新JQM的方法嗎？ – 2014-08-01 20:46:39

可能最簡單的方法是找出jQuery使用什麼圖像文件的圖標，然後修改該圖像文件（或創建自己的）並將其放置到位。

來源

2009-11-30 19:07:06 singingwolfboy

這肯定會工作，但我的網頁的其他部分使用類使用默認的灰色圖標，並適當地做。我不想搞亂那些圖標，只在一個地方實現白色圖標效果。 – 2009-11-30 19:11:14

自我回答：自己指定背景圖片網址爲使用白色圖標的文件。所以我添加了幾行到我的CSS文件：

.dialog #errorMessage .ui-icon 
{ 
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png); 
}

這基本上將覆蓋默認的jQuery的css文件中要使用的圖標的背景圖像，並取得我想要的顏色。當然這只是因爲一個白色的圖標.png文件包含在主題中。如果我想要一些瘋狂的顏色，比如紫色，我需要創建自己的圖標。請注意，我需要延長我自己的CSS文件中的URL而不是jQuery CSS文件中指定的URL，因爲它們位於我的源中的兩個不同位置。

來源

2009-12-03 21:29:56

我也發現這一點。但有沒有簡單的方法來改變圖標的顏色？ – Prasad 2010-07-07 12:47:03

感謝您的支持！我想讓我的「刪除」按鈕圖標變爲紅色，但將其他設置保留爲默認值。像冠軍一樣工作，但希望有一天他們會添加更好的方法。 – 2010-07-16 13:59:17

@KevinPauli他們有;只需添加一個你想要的顏色類：'class =「ui-icon ui-icon-alert紅色」' – 2013-02-19 12:42:54

使用內置圖標生成的圖標顏色＃00a300＃墨綠色

.ui-icon 
{ 
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important; 
}

來源

2011-07-19 06:43:50 mcdba

圖例。我不知道這件事。我使用http://jqueryui.com/themeroller/images/?new=ff0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png生成一組新的紅色圖標，其中I然後添加到我的主題中的一組圖標。 256寬度和240高度是默認的圖標文件大小（看看你的主題圖像文件） – Joe 2011-08-06 10:55:27

+30

我不相信jQuery-UI希望他們的圖標生成器用作CDN。我不確定他們的服務器是否緩存了這些圖像，但是當緩存不存在時它仍然必須生成該圖像。如此強調他們的服務器並不是很好......你應該生成一次並將它保存在你的服務器上 – sparebytes 2012-06-26 15:38:50

-2

對於本地存儲的css文件在這種情況下，紅色：

<style> 
#my_id .ui-icon { 
    background-image: url(my_css_file_location/ui-icons_cd0a0a_256x240.png); 
} 
</style>}

來源

2014-07-19 17:29:25 user2259146

如何指定（忽略）JQuery圖標顏色

回答

相關問題