JQueryモバイルを使用してアイコンを表示するにはどうすればいいですか？

Question

私は自分のモバイルプロジェクトを見ており、jqueryモバイルライブラリのバージョン1.4.5を使用しています。

私はこのPNG画像を持っています。ここでは

はCSSです：ここでは

.ui-icon-measure { 
    background-image: url(img/length_measure.png); 
} 

#measureControl { 
    position: absolute; 
    left: 10px; 
    top: 3em; 
    width: 40px; 
    z-index: 9999; 
} 

#measureButton .ui-icon { 
    width: 30px; 
    height: 30px; 
    top: 13px; 
    right: 13px; 
    background-color: transparent; 
    background-position: center; 
} 

はHTMLコードです：

<div id="measureControl" data-role="controlgroup" data-type="vertical"> 
    <a href="#" data-role="button" data-icon="measure" id="measureButton" data-iconpos="notext"></a> 
</div> 

ここでは、ビューにどのように見えますか：

しかし、私はそれがそのようになりたい：

私が所望のビューを取得するために、上記のコードに変更する必要がありますどのような任意のアイデア？

Answer 1

以下のコードは、これを生成する：

.ui-icon-measure:after { 
    background: url(img/length_measure.png) no-repeat !important; 
} 

#measureControl a { 
    padding: 20px; 
} 

#measureControl { 
    position: absolute; 
    left: 10px; 
    top: 3em; 
    width: 40px; 
    z-index: 9999; 
    border-radius: 13px; 
}