1
Andy Matthew의 사용자 정의 jQuery Mobile 아이콘 팩 ("원본"및 "글꼴 굉장한"아이콘)을 사용하고 있습니다. 멋진 글꼴은 iPad에서 작동하지만 "원본" 아이콘 표시 (그러나 삼성 기기 등에 표시)하지 않는jQuery 모바일 아이콘이 Ipad 3에 표시되지 않습니다.
다음과 같이 내가 레일 자산 파이프 라인과 함께 작업 할 수있는 CSS를 수정 :..
/*
jQuery Mobile Icon Pack
andy matthews
@commadelimited
*/
/* Icons
-----------------------------------------------------------------------------------------------------------*/
.ui-icon,
.ui-icon-searchfield:after {
background: #666666;
background: rgba(0,0,0,.4);
background-image: image-url('vendor/jqm-icon-pack/icons-18-white-pack.png');
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/
.ui-icon-alt {
background: #ffffff;
background: rgba(255,255,255,.3);
background-image: image-url('vendor/jqm-icon-pack/icons-18-black-pack.png');
background-repeat: no-repeat;
}
/* restore default loading image */
.ui-icon-loading {
background: image-url('vendor/jqm-icon-pack/ajax-loader.gif');
background-size: 46px 46px;
}
/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.3),
only screen and (min-device-pixel-ratio: 1.3),
only screen and (min-resolution: 1.3dppx) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
.ui-icon-question , .ui-icon-foursquare , .ui-icon-twitter , .ui-icon-facebook , .ui-icon-dollar , .ui-icon-euro,
.ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-bell , .ui-icon-mappin , .ui-icon-direction,
.ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
.ui-icon-rss , .ui-icon-wifi , .ui-icon-phone , .ui-icon-power , .ui-icon-lock , .ui-icon-flag , .ui-icon-calendar,
.ui-icon-lightning , .ui-icon-drink , .ui-icon-android , .ui-icon-edit {
background-image: image-url('vendor/jqm-icon-pack/icons-36-white-pack.png');
-moz-background-size: 774px 54px;
-o-background-size: 774px 54px;
-webkit-background-size: 774px 54px;
background-size: 774px 54px;
}
.ui-icon-alt {
background-image: image-url('vendor/jqm-icon-pack/icons-36-black-pack.png');
}
}
이 내가 변경하지 않은 이외의를 images 디렉토리는 다음과 같습니다. assets/images/vendor/jqm-icon-pack
이것을 확인하십시오 http://stackoverflow.com/questions/16453714/why-arent-jquery-mobile-icons-clipped - 고해상도 디바이스에 적합 – Omar