JQueryモバイルヘッダーのカスタムアイコン

Question

私のJQuery Mobileアプリケーションのヘッダーにカスタムアイコンを使用しようとしています。使用しようとしている特定のアイコンは、Glyphish（http://glyphish.com/）の「再生」アイコンに過ぎません。ここで概要を示すヘッダー内の右ボタンで使用しようとすると、 http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.htmlのアイコンが奇妙に表示されます。私は単にヘッダーバーに "再生"ボタンを表示することはできません。ここに私のコードです：

<style type="text/css"> 
    .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; } 
    .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } 
    #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; } 
</style> 

<div id="myPage" data-role="page" data-dom-cache="false"> 
    <div data-role="header"> 
     <h1>My Title</h1> 
     <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a> 
    </div> 

    <div data-role="content"> 
    <!-- page content goes here --> 
    </div> 
</div> 

誰かがこれを修正する方法を教えてくださいできますか？

Answer 1

Jqueryモバイルでは、カスタムボタンアイコンの操作方法があります。ここでは、次の作業例http://jsfiddle.net/codaniel/88kQu/1/

myappに、電子メールやボタンのプラグインのようなユニークな名前がでクラスを生成します持っているデータのアイコン値を指定して、カスタムアイコンを使用するにはhttp://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

からちらほらですui-icon-をデータアイコンの値の前に付けて、ui-icon-myapp-emailというボタンに適用します。

スタイルシートにui-icon-myapp-emailクラスを対象とするCSSルールを記述して、アイコン背景ソースを指定することができます。他のアイコンとの視覚的な一貫性を維持するには、アルファ透明度を持つPNG-8として保存された18x18ピクセルの白いアイコンを作成します。

この例では、スタンドアロンのアイコンイメージを指していますが、フレームワークで使用するアイコンスプライトのように、アイコンスプライトを簡単に使用して位置を指定することもできます。

.ui-icon-myapp-email { 
    background-image: url("app-icon-email.png"); 
} 

Answer 2

変更カスタムアイコンのためのCSSの名前をCSSクラス名を構築するためのデータ・アイコンの属性を提供する値に

<style type="text/css"> 
    ... clipped... 
.ui-icon-custom 
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; 
} 

jQueryのモバイルプリペンド「UI-アイコン」を次のように。あなたのdata-icon属性は値 'custom'を持っているからです。関連するCSSクラスは '.ui-icon-custom'と呼びます。

参考：http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html