2014-09-11 3 views
0

Как-то я не могу получить пользовательский значок ui. В этом примере два файла изображений (18x18 и 36x36 px) находятся в том же каталоге, что и html-файл. Кто-нибудь может понять, что здесь не так? Спасибо.jQuery Мобильный пользовательский значок не работает

<!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

Все выглядит, если быть честным? –

+0

Так отображается стандартный значок? – Regent

+0

@Regent Это просто темно-серая кнопка без значка. –

ответ

-2

Добавить важный в ваш 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

, если u переопределяет существующий значок, вы можете использовать важные. Но это новая икона. ТАК важно не работать. –

+0

@Raj вы попробовали это или просто спекулируете? Попробуйте. Оно работает. – sid

+0

Это действительно сработало. Я попробовал это с добавлением «no-repeat rgba (0, 0, 0, 0.4)! Important;» который я нашел где-то в другом месте, но это не сработало. Важнейшая работа. Теперь «единственная» проблема заключается в том, что значок не находится на правильной позиции на кнопке и повторяется. «Нет-повторить! важно»; не работает, но значок не отображается вообще. –

Смежные вопросы