2014-09-11 63 views
0

不知何故我無法獲得自定義的UI圖標。在這個例子中,兩個圖像文件(18x18和36x36像素)與html文件位於同一個目錄中。任何人都可以發現這裏有什麼問題?謝謝。jQuery Mobile自定義圖標不能正常工作

<!DOCTYPE html> 
<html> 
<head> 
    <title>-</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" /> 
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.3/theme-classic/theme-classic.css" /> 

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script> 

    <style style="text/css"> 
     .ui-icon-dbblue { 
      background-image: url("dbblue.png"); 
     } 

     @media only screen and (-webkit-min-device-pixel-ratio: 2) { 
      .ui-icon-dbblue { 
        background-image: url("dbblue_hr.png"); 
        background-size: 18px 18px; 
      } 
     } 
    </style> 

</head> 
<body> 

    <div data-role="page" data-title="Control" id="control" data-add-back-btn="true"> 
     <div data-role="content"> 
      <a href="#" data-role="button" data-icon="dbblue" data-iconpos="notext" title="dbblue"></a> 
     </div> 
    </div> 

</body> 
</html> 
+0

所有看起來爲了誠實? – 2014-09-11 11:00:19

+0

那麼標準圖標會顯示嗎? – Regent 2014-09-11 11:03:56

+0

@Regent這只是一個沒有任何圖標的深灰色按鈕。 – 2014-09-11 11:09:13

回答

-2

add!important in your css。

<style style="text/css"> 
    .ui-icon-dbblue { 
     background-image: url("dbblue.png") !important; 
    } 

    @media only screen and (-webkit-min-device-pixel-ratio: 2) { 
     .ui-icon-dbblue { 
       background-image: url("dbblue_hr.png") !important; 
       background-size: 18px 18px !important; 
     } 
    } 
</style> 
+0

,你可以使用重要的。但它是一個新的偶像。所以重要的不會工作。 – 2014-09-11 11:20:52

+0

@Raj你有沒有試過或只是猜測?請嘗試。有用。 – sid 2014-09-11 11:23:45

+0

這實際上工作。我嘗試過增加了「不重複的rgba(0,0,0,0.4)!重要的;」我在其他地方找到了,但那不起作用。 !重要的獨自作品。現在「唯一」的問題是圖標未正確放置在按鈕上並重復。 「不重複!重要」;雖然不起作用,但圖標根本不顯示。 – 2014-09-11 12:33:45