在jQuery Mobile中通過CSS Class使用圖標

Question

我想在span元素上使用jQuery Mobile中的圖標......並且我也想支持視網膜顯示。那麼我怎樣才能使用圖標而不給我的跨度固定寬度？ 我應該使用媒體查詢並嘗試讓它以這種方式工作，或者是否有任何「官方的方式」來做到這一點？

問候 尼爾斯

Answer 1

這是我在做JQM自定義圖標的程序。

您需要2個PNG的一個是18×18，另一個是36x36的

在你的CSS：

//non-retina 
.ui-icon-amazing { 
    background-image: url("custom.png"); 
} 

//retina 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    .ui-icon-amazing { 
     background-image: url("custom-hd.png"); 
     background-size: 18px 18px; 
    } 
} 

要使用新的圖標，你所說的「驚人」只需要使用相應的數據-icon =屬性

data-icon="amazing" 

並且該圖標將被應用。

你可以將base64編碼的png直接加入到你的樣式表中。