listview JQuery Mobile에 작은 아이콘 넣기

Question

아이콘을 올바르게 입력 할 수없는 것 같은데 누군가 나를 도울 수 있습니까? JQuery와 모바일 버전 : 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> 

우리 folowing CSS가 추가하십시오 inlineIcon 동안

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

P 라인 높이, 아이콘 수직으로 공간을 만든다 클래스는 아이콘을 올바르게 배치합니다.

당신이 회색 디스크를하지 않고 아이콘의 일반 블랙 버전을 원하는 경우, 당신이 검은 색 확인하기 위해 범위에 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