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

我创建了自定义导航栏图标，它们会显示出来。但他们被困在一个圆圈内。有没有可能把这个图标从手机内置的查询圈中放大

请看下一页，了解我的意思：

这是我的密码：

CSS:

HTML:

---

怎么了？我怎样才能改变这一点？

这个问题应该标记为“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;
}

 <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>