jquery-mobile - 如何在 jQuery 移动页面的导航栏中添加自定义图标

Question

在 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）。但是，这对我没有帮助。

Answer 1

你需要稍微改进你的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/