JQuery 아이콘 색상 지정 (재정의) 방법

JQuery 아이콘 색상 지정 (재정의) 방법

---

웹 앱에서 jQuery 아이콘을 잘 활용하고 있지만 기본적으로 얻을 수없는 색상을 사용하고 싶은 시점에 도달했습니다. 저는 현재 주로 녹색을 사용하는 "State Street"테마를 사용하고 있습니다. 하지만 흰색 텍스트가있는 빨간색 상자가 있고 흰색 아이콘도 사용하고 싶습니다. 테마와 함께 제공되는 흰색 아이콘이 있지만 아이콘이 "ui-state-focus"클래스가있는 div (또는 다른 컨테이너) 내부에있을 때만 적용됩니다. 이렇게하면 아이콘이 흰색으로 바뀌지 만 배경색이 녹색으로 변경되어 빨간색으로 남겨 둡니다.

다른 색상을 사용할 수 있도록 jQuery가 아이콘에 사용하는 배경 이미지를 재정의하는 방법 (대부분 CSS를 통해)이 있습니까?

감사.

설명 : 현재 작업중인 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%
}

"display : none"은 현재 주석 처리되어 있으므로 볼 수 있습니다. 오류 캐치시 fadeIn하도록 설정했습니다. 도움을 주셔서 다시 한 번 감사드립니다.

---

다음 CSS로 아이콘을 덮어 쓸 수 있습니다.

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

원하는 색상으로 아이콘 png 파일을 다운로드 할 수 있습니다. 다음 URL에서 색상 부분을 변경하십시오.

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

예를 들어 빨간색 아이콘과 수레 국화 파란색 아이콘을 원하는 경우 필요한 URL은 다음과 같습니다.

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

기타

(하지만 URL을 CDN으로 사용하지 마시고 파일을 로컬에 저장하십시오)

---

SELF-ANSWER : 흰색 아이콘을 사용하는 파일이되도록 배경 이미지 URL을 직접 지정했습니다. 그래서 CSS 파일에 몇 줄을 추가했습니다.

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

This essentially overrides the background image that the default jQuery css file wants to use for the icon, and achieved the color that I wanted. Of course this only worked because a white icon .png file was included with the theme. If I wanted some crazy color, like purple, I would have needed to create my own icon(s). Note that I needed to lengthen the URL in my own CSS file versus the URL that is specified in the jQuery CSS file, because they're located in two different places in my source.

---

Use built-in icon generator for icon color #00a300 # dark green

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

---

Probably the simplest way to do that is to find out exactly what imagefile jQuery is using for the icons, and then modify that image file (or create your own) and drop it into place.

---

buttons : [text : //이
html : 'No', "class": 'bg-secondary text-white p-2 border-0',
클릭 : function () {
$ (this) .dialog ( "close ");
}]

---

로컬에 저장된 CSS 파일 (이 경우 빨간색) :

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

참고 URL : https://stackoverflow.com/questions/1821568/how-to-specify-override-jquery-icon-color