css - カスタム Navbar アイコンが円の中にスタックする

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>

どうしたの？どうすればそれを変更できますか?