jquery mobile中的导航栏图标问题
Posted
技术标签:
【中文标题】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 是我的文件夹名称以上是关于jquery mobile中的导航栏图标问题的主要内容,如果未能解决你的问题,请参考以下文章
ios中的嵌入式视频阻止导航栏功能jquery mobile