1

jQueryモバイルページで、ナビゲーションバーにカスタムアイコンを追加するにはどうすればよいですか? 私のフッターの内容は以下のとおりです。

<footer data-role="footer">  
     <div data-role="navbar" >  
         <ul>  
              <li><a href="#" data-icon="abc"> Abc </a></li>  
              <li><a href="#" data-icon="xyz"> xyz </a></li>  
          </ul>  
      </div>  
</footer>

CSS ファイルに含まれるもの

.ui-icon-abc
{
    background-image: url('common-images/c.png');
    background-size: 60px 60px;
}

ただし、これは機能しません。円は表示されますが、画像は表示されません。他のSO（リンク1とリンク2 ）で試しました。しかし、それは私を助けませんでした。

4

1 に答える 1

3

css を少し改善する必要がありますが、これは機能します (この.ui-icon-メソッドを機能させるには、アイコン アイコンも小さくする必要があります)。

.ui-icon-abc
{
    background: url('common-images/c.png') no-repeat rgba(0, 0, 0, 0.4) !important;
    background-size: 16px 16px;
}

私の例を見てください: http://jsfiddle.net/Gajotres/Q9TrF/

于 2013-01-30T09:04:43.540 に答える