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（link 1和link 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/

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

1 个答案: