참조 - 삶의 조각들
jQuery Mobile에서는 기본적으로 18가지 아이콘을 제공한다.
<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>
<a href="#" data-role="button" data-icon="arrow-r">arrow-r</a>
<a href="#" data-role="button" data-icon="arrow-u">arrow-u</a>
<a href="#" data-role="button" data-icon="delete">delete</a>
<a href="#" data-role="button" data-icon="plus">plus</a>
<a href="#" data-role="button" data-icon="arrow-d">arrow-d</a>
<a href="#" data-role="button" data-icon="minus">minus</a>
<a href="#" data-role="button" data-icon="check">check</a>
<a href="#" data-role="button" data-icon="gear">gear</a>
<a href="#" data-role="button" data-icon="forward">forward</a>
<a href="#" data-role="button" data-icon="back">back</a>
<a href="#" data-role="button" data-icon="refresh">refresh</a>
<a href="#" data-role="button" data-icon="grid">grid</a>
<a href="#" data-role="button" data-icon="star">star</a>
<a href="#" data-role="button" data-icon="search">search</a>
<a href="#" data-role="button" data-icon="alert">alert</a>
<a href="#" data-role="button" data-icon="info">info</a>
<a href="#" data-role="button" data-icon="home">home</a>
버튼 상에서 아이콘 위치는 data-iconpos="notext|left|right|top|bottom" 속성값을 이용한다.
- notext : 버튼 텍스트는 감추고 아이콘만 보인다
- left : 버튼 텍스트 좌측에 아이콘을 보인다(기본값)
- right : 버튼 텍스트 우측에 아이콘을 보인다
- top : 버튼 텍스트 상단에 아이콘을 보인다
- bottom : 버튼 텍스트 하단에 아이콘을 보인다
기본아이콘 대신 사용자 정의 아이콘을 사용할 수 있다.
.ui-icon-roadrunner {
background-image : url(roadrunner.png) !important;
background-repeat : no-repeat !important;
}
<a href="#" data-role="button" data-icon="roadrunner" data-inline="true">roadrunner</a>