JQueryUI의 외부 아이콘 사용

Question

JQuery UI 용 외부 아이콘을 쉽게 사용할 수 있습니까?

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#aButton').button({ 
      icons: 
      { 
       primary: "ui-icon-newicon" 
      } 
     }); 
    }); 
</script> 

<button id="aButton">hello</button> 

은 외부 JPEG 또는 PNG를 표시 할 수 있습니다 :

내가 버튼에 다음과 같은 아이콘이 말? 가장 쉬운 방법은 기존 JQuery UI png 파일을 편집하지 않고이 작업을 수행하는 것입니다.

이전에 수동으로 편집하고 대체했습니다. ui-icons_xxxxxx_256x240.png 파일에서 사용하지 않는 아이콘은 Nuget을 사용하여 새 버전의 JQuery UI로 업그레이드하고 png 파일을 바꿀 때까지 훌륭하게 작동합니다.

편집 :

내 Site.css에서이 클래스 (자사의 ASP.NET MVC3 응용 프로그램) 등재 및 중요한 플래그를 추가 할 필요!. 상태에 아무런 문제가 없었습니다 (버튼이 강조 표시된 경우 등).

#aButton.ui-icon-custom { 
    background-image: url(...); 
    background-position: 0 0; 
} 

Answer 1

물론, 그냥 뭔가를 자신의 파일을 추가하고 특정 버튼에 대한 CSS 클래스를 제공합니다 :

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

Answer 2

당신은 당신의 CSS에서 클래스에 대한 자신 만의 스타일을 정의하여이를 수행 할 수 있습니다

.ui-icon-newicon 
{ 
    background-image: url(images/delete.png) !important; 
    background-position: 0 0; 
}