将小图标放在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"添加图标的范围：

<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行高为图标垂直腾出空间，而inlineIcon类则正确放置图标。

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