jQuery Mobile‎ > ‎버튼‎ > ‎

입 맛에 맞는 아이콘이 없다면...


아이콘 목록에 없는 아이콘을 사용할 수도 있다. 다만, CSS를 좀 건드려야 한다. data-icon 속성에 아이콘 리스트에는 없는 새로운 값을 지정하면 커스텀 아이콘으로 지정된다. 이러면 버튼은 jQuery Mobile에서 처리되어 생성될 때 해당 버튼의 class 속성에 ui-icon-로 시작되는 값이 추가되므로 아래의 예에서와 같이 이 class에 해당하는 CSS를 설정하면 된다.

기존의 테마와 시각적으로 잘 어울리도록 하기 위해서 이미지 파일은 하얀색으로 그리도록 하고 18x18픽셀의 크기에 투명도가 지원되는 PNG-8 형식으로 저장하는 것이 좋다.

<a href="index.html" data-role="button" data-icon="myDeleteIcon">삭제</a>

.ui-icon-myDeleteIcon {
background-image: …
}


Comments