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

在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> 

---

然而，这不起作用。它显示一个圆，但不显示图像。我试着和其他SO（和）在一起。但是，这对我没有帮助。

您需要稍微改进您的css，这将起作用（您的图标也需要更小，才能使此.ui图标-方法起作用）：

---

看看我的例子：

谢谢你的帮助。我怎样才能添加一个大图标呢？如果你不着急，我会在几个小时内给你举另一个例子。我不着急。如果你能做到，我将不胜感激。非常感谢您的帮助。或者，如果您很匆忙，请看这里：，很好的工作示例

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

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