将小图标放在listview 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"为图标添加一个span：

<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;
}

P line-height 为图标垂直腾出空间，而 inlineIcon 类正确放置图标。

如果您不想要灰色磁盘并且更喜欢纯黑色版本的图标，您可以将 ui-alt-icon 类添加到 span 以使其变为黑色，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