jquery mobile中的导航栏图标问题

Posted 2023-05-08

【中文标题】jquery mobile中的导航栏图标问题

【英文标题】：Issue with Navbar icon in jquery mobile

【发布时间】：2014-08-26 00:40:26

【问题描述】：

我需要为我的导航栏添加图标，所以我从以下链接下载了图标，http://www.glyphish.com/，我已经下载了免费图标。然后我试图在代码中添加图标，我的缺点没有显示？代码有什么问题？

<div data-role="navbar">
                <ul>
                    <li><a id="other-color" data-icon="img/193-location-arrow.png" data-iconpos="left" href="#">Set Filter</a></li>
                    <li><a id="other-color" data-icon="img/193-location-arrow.png" data-iconpos="right" href="#">Add page</a></li>
                </ul> 

截图：

【参考方案1】：

创建自定义类并使用:after 伪选择器修改它们的background-image。

.ui-arrow:after 
  background-image: url(../193-location-arrow.png);
  background-size: 15px 15px;


.ui-location:after 
  background-image: url(../07-map-marker.png);
  background-size: 20px 20px;

Demo

【讨论】：

如果我想使用文件夹中的图片，url(img/193-location-arrow.png);这行得通吗？ img 是我的文件夹名称