自定义导航栏图标卡在一个圆圈内

Question

我创建了自定义导航栏图标并显示出来。虽然他们被困在一个圆圈内。有没有机会从查询 - 移动内置圈中获得更大的图标？

看看下面的页面，看看我的意思：

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&dagger;         </a></li>
  <li><a href="#p5" id="musik" data-icon="custom" data-transition="fade">Musik</a></li>
  </ul>
  </div>
 </div>

什么错了？我怎么能改变它？