'iCon'에 해당되는 글 1건

  1. 2015.07.20 jQuery mobile에서 custom icon 만들기
헤더의 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>
      <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
Posted by 세상을 살아가는 사람
,