本文介绍了jquery mobile 中导航栏图标的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要为我的导航栏添加图标,所以我从以下链接下载了图标,
I need to add the icon for my navbar, so I have downloaded the icon from the following link,http://www.glyphish.com/, I have downloaded the free icons. then I am trying to add the icons in the code, I cons are not displaying? What's wrong with code?
<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>
Screenshot:
解决方案
Create custom classes and modify their background-image
using :after
pseudo selector.
.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;
}
这篇关于jquery mobile 中导航栏图标的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!