使用自定義圖標在jQuery Mobile中創建按鈕

我正在爲客戶端開發一個應用程序，並試圖創建一個帶有完全自定義圖標的按鈕。圖標是30px x 30px，中間是透明的。使用自定義圖標在jQuery Mobile中創建按鈕

我已經幾乎實現了我想用一下這個CSS代碼：

/* info button override */ 
.ui-icon-info-page { 
    background: url(images/G_help_icon_round.png) 50% 50% no-repeat; 
    background-size: 30px 30px; 
    background-color: black; 
}

但是，裏面的圖標會出現一個瘦黑圈，也該圖標圖像看起來被剪除

enter image description here

我想刪除此圓圈並阻止圖標？從被切斷。此外，我希望問號是透明的而不是黑色，以顯示導航欄的圖像。如果我嘗試將背景色設置，雖然透明，按鈕上顯示全白：

enter image description here

我怎樣才能做到這一點？

更新：

我試圖將這種代碼：

/* info button override */ 
.ui-icon-info-page { 
    background: url(help.png) 50% 50% no-repeat; 
    background-size: 30px 30px; 
    width: 30px; 
    height: 30px; 
    margin-top: -15px !important; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
}

，得到了這樣的結果：

enter image description here

我能夠通過調整頂部四周移動圖標並留下邊距，但邊緣在以黑色圓圈爲中心的框架外部被切斷：

enter image description here

更新2：

這裏是我使用的（請注意，它是無形的在這裏，因爲它是在白色背景上的白色按鈕）按鈕：

enter image description here

這裏是我用來加載按鈕的html代碼：

<div data-role="header" data-position="fixed"> 
      <div><img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/> </div>   
      <a href="index.html" data-icon="refresh" class="ui-btn-left" data-transition="fade" data-iconpos="notext" data-theme="a"></a> 
      <a href="info.html" data-icon="info-page" class="ui-btn-right" data-transition="flip" data-iconpos="notext" data-theme="a"></a> 

</div>

來源

2012-05-13 Darren

這應該可以解決這個問題

/* info button override */ 
.ui-icon-info-page { 
    background: url(help.png) 50% 50% no-repeat; 
    background-size: 30px 30px; 
    width: 30px; 
    height: 30px; 
    margin-top: -15px !important; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
}

請確保您jQuery Mobile的CSS加載後您的應用程序的CSS文件。

編輯：這是一個基於你貼有固定

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
     <style> 
      #rightBtn .ui-btn-inner { 
       width: 30px; 
       height: 30px; 
       margin: -3px;/*Modify to change icon position wrt the header*/ 
       border: none !important; 
      } 
      .ui-icon-custom { 
       background: url(http://i.stack.imgur.com/AqicD.png) 50% 50% no-repeat; 
       background-size: 30px 30px; 
       width: 30px; 
       height: 30px; 
       box-shadow: none; 
       -webkit-box-shadow: none; 
       margin: 0 !important; 
      } 
     </style> 
    </head> 
    <body> 
     <div data-role="header"> 
      <h1>Page Title</h1> 
      <a href="index.html" data-icon="refresh" class="ui-btn-left" data-transition="fade" data-iconpos="notext" data-theme="a"></a> 
      <a href="info.html" id="rightBtn" data-icon="custom" class="ui-btn-right" data-transition="flip" data-iconpos="notext" data-theme="a"></a> 
     </div><!-- /header --> 

     <div data-role="content"></div><!-- /content --> 

     </div><!-- /page --> 

    </body> 
</html>

的演示此問題的代碼示例代碼 - http://jsfiddle.net/LCsmt/

讓我知道是否有幫助。

來源

2012-05-13 17:00:30 user700284

感謝您的建議，但它並沒有很好的工作。我已經更新了我的問題。我在jquery mobile css之後加載了這個頁面的css（除非我不明白幕後發生了什麼）。 – Darren

你可以在任何地方用你正在使用的實際圖標託管代碼的機會嗎？然後我可以看看並試圖找出問題。只需單獨使用該按鈕的代碼即可。 – user700284

我不確定我是否瞭解你，但我想你是要求我上傳按鈕圖片。我將它添加到問題中 - 注意它不可見，因爲它是白色背景上的白色按鈕，但如果右鍵單擊問題中的空間，您將可以保存它。謝謝你的幫助！ – Darren

使用自定義圖標在jQuery Mobile中創建按鈕

回答

相關問題