헤더의 navbar에 custom icon을 적용하는 방법을 기술한다. 이것을 일반적인 버튼에 적용하여도 된다.
<body onload="init();" id="stage" class="theme">
<p><span id="message">Custom Icon.</span></p>
<div data-role="navbar" class="custom_icon">
<ul>
<li><a href="#" id="icon1" data-icon="custom">Alarm</a></li>
<p><span id="message">Custom Icon.</span></p>
<div data-role="navbar" class="custom_icon">
<ul>
<li><a href="#" id="icon1" data-icon="custom">Alarm</a></li>
<li><a href="#" id="icon2" data-icon="custom">Call</a></li>
<li><a href="#" id="icon3" data-icon="custom">Home</a></li>
<li><a href="#" id="icon4" data-icon="custom">Message</a></li>
</ul>
</div>
</body>
CSS를 이용하여 버튼에 아이콘 이미지를 적용한다. 위치와 크기를 조절해 준다.
<style type="text/css">
#icon1 .ui-icon {
background: url(images/icon_alarm.png) 0% -15% no-repeat;
background-size: 34px 34px;
}
#icon2 .ui-icon {
background: url(images/icon_call.png) 0% -15% no-repeat;
background-size: 34px 34px;
}
#icon3 .ui-icon {
background: url(images/icon_home.png) 0% -15% no-repeat;
background-size: 34px 34px;
}
#icon4 .ui-icon {
background: url(images/icon_message.png) 0% -15% no-repeat;
background-size: 34px 34px;
}
.custom_icon .ui-btn .ui-icon {
width: 100%; height: 100%;
margin-left: -17px;
}
</style>
'앱개발' 카테고리의 다른 글
| Android Stuido Layout Editor와 AVD 한글처리 (0) | 2017.01.31 |
|---|---|
| 안드로이드 교육 목차 (0) | 2017.01.25 |
| Android Studio 2.2.3 설치 (0) | 2017.01.25 |
| PhoneGap에 광고 추가하기 (0) | 2015.07.18 |
| 스마트폰의 resolution 정리 (0) | 2015.07.18 |
