Button icons

Adding Icons to Buttons

버튼에 아이콘을 추가할 수 있습니다.
JQM 프레임웍은 모바일 앱에서 자주 사용되는 아이콘을 포함하고 있습니다.
저용량 다운로드 JQM버젼에는 모든 배경색에 훌륭하게 대비될 수 있는 검정색의 반투명 원모양위에 하얀색 아이콘을 포함하고 있습니다. data-icon 속성을 추가하여 사용합니다.

< a href="index.html" data-role="button" data-icon="delete">Delete</a>

Icon set

Left arrow - data-icon="arrow-l"

My button

Right arrow - data-icon="arrow-r"

My button

Up arrow - data-icon="arrow-u"

My button

Down arrow - data-icon="arrow-d"

My button

Delete - data-icon="delete"

My button

Plus - data-icon="plus"

My button

Minus - data-icon="minus"

My button

Check - data-icon="check"

My button

Gear - data-icon="gear"

My button

Refresh - data-icon="refresh"

My button

Forward - data-icon="forward"

My button

Back - data-icon="back"

My button

Grid - data-icon="grid"

My button

Star - data-icon="star"

My button

Alert - data-icon="alert"

My button

Info - data-icon="info"

My button

Home - data-icon="home"

My button

Search - data-icon="search"

My button

Icon positioning

아이콘의 디폴트 위치는 왼쪽입니다.
아이콘의 위치 설정 속성은 data-iconpos=[right, top, bottom] 입니다.
notext 값을 주면 버튼의 텍스트 부분이 줄어 아이콘 버튼이 됩니다.

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">right position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">top position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">bottom position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">notext icon Delete </a>