把小圖標放在列表視圖jQuery Mobile

Question

似乎我不能把圖標正確，有人可以幫我嗎？ jQuery Mobile的版本：1.4.2

<div data-role="page" id="pageone"> 
<div data-role="main" class="ui-content"> 
<h2>List With Thumbnails and Text</h2> 
<ul data-role="listview" data-inset="true"> 
<li> 
<a href="#"> 
<img src="chrome.png"> 
<h2>Google Chrome</h2> 
<p><img class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'/> Google Chrome is a free, open-source web browser. Released in 2008.</p> 
</a> 
</li> 
<li> 
<a href="#"> 
<img src="firefox.png"> 
<h2>Mozilla Firefox</h2> 
<p>Firefox is a web browser from Mozilla. Released in 2004.</p> 
</a> 
</li> 
</ul> 
</div> 
</div> 

結果：

我嘗試使用這個，但不起作用。

<span><i class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'>Text</i></span> 

Answer 1

，你可以這樣完成它。

加上一個跨度的圖標與class="ui-icon-home ui-btn-icon-notext inlineIcon"：

<p> 
    <span class="ui-icon-home ui-btn-icon-notext inlineIcon"></span> 
    Google Chrome is a free, open-source web browser. Released in 2008. 
</p> 

然後，我們添加如下因素CSS：

li p { 
    line-height: 24px; 
} 
.inlineIcon { 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
    margin-right: 6px; 
} 

的普線高，使室內垂直的圖標，而inlineIcon類正確地放置圖標。

如果你不想灰色的磁盤並希望該圖標的純黑色的版本，你會在UI-ALT-圖標類添加到跨度，使其黑色，CSS將是：

.inlineIconNoDisk { 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
    margin-right: 6px; 
} 
.inlineIconNoDisk:after { 
    background-color: transparent; 
} 

這裏是一個DEMO

而且截圖：

Answer 2

試試這個代碼將工作如果你想用文字而不是一個按鈕圖標在線

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 

    <div data-role="page" id="pageone"> 
    <div data-role="main" class="ui-content"> 
    <h2>List With Thumbnails and Text</h2> 
    <ul data-role="listview" data-inset="true"> 
     <li> 
     <a href="#"> 
      <img src="chrome.png"/> 

     <h2>Google Chrome</h2> 

<div class="ui-grid-a"> 
    <div class="ui-block-a" style="width:30%;"><button data-icon='home' data-iconpos="notext"></button></div> 
    <div class="ui-block-b" style="width:70%;"> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p></div></div> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <img src="firefox.png"/> 
     <h2>Mozilla Firefox</h2> 



      <div class="ui-grid-a"> 
    <div class="ui-block-a" style="width:30%"><button data-icon='home' data-iconpos="notext"></button></div> 
    <div class="ui-block-b" style="width:70%;padding-bottom:5%;"> <p>Firefox is a web browser from Mozilla. Released in 2004.</p></div> 

</div> 
     </a> 
     </li> 
    </ul> 
    </div> 
</div> 

請參閱本Fiddle Demo