我创建了自定义导航栏图标,它们出现了。他们被困在一个圆圈内。有没有机会从内置的查询移动设备中获得更大的图标?
请查看以下页面以了解我的意思:
https://web.archive.org/web/20120511013421/http://evangelich.de/test/#p5
这是我的代码:
CSS:
.icons .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.icons .ui-btn ui-icon {
width: 40px !important;
height: 30px !important;
margin-left: 0px !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius: none !important;
border-radius: 10px !important;
}
#msg .ui-icon {
background: url(icons/msg.png) 50% 50% no-repeat;
background-size: 40px 30px;
}
#nibe .ui-icon {
background: url(icons/nibe.png) 50% 50% no-repeat;
background-size: 40px 30px;
}
#yougent .ui-icon {
background: url(icons/yougent.png) 50% 50% no-repeat;
background-size: 40px 30px;
}
#musik .ui-icon {
background: url(icons/musik.png) 50% 50% no-repeat;
background-size: 40px 30px;
}
HTML:
<div data-role="footer" data-position="fixed" data-theme="a" class"="icons">
<div data-role="navbar" class"="icons">
<ul>
<li><a href="#p2" id="msg" data-icon="custom" data-transition="fade">Msg L.</a></li>
<li><a href="#p3" id="nibe" data-icon="custom" data-transition="fade">Ni-Be</a></li>
<li><a href="#p4" id="yougent" data-icon="custom" data-transition="fade">YouGen† </a></li>
<li><a href="#p5" id="musik" data-icon="custom" data-transition="fade">Musik</a></li>
</ul>
</div>
</div>
怎么了?我该如何改变呢?