2014-09-11 118 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