jquery-mobile - jQuery Mobile アイコンがボタンに適切にフィットしない

Question

jQuery モバイル アプリの開発で忙しいのですが、何らかの理由でボタンが次のように表示され続けます。

これらのボタンを生成するコードは次のとおりです。

   <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" data-icon="home" data-transition="pop" data-role="button" data-mini="true" >Home</a></li>
                    <li><a href="#searchpage" data-icon="search" data-transition="pop" data-role="button" data-mini="true" >Search</a></li>
                    <li><a href="#sellbookpage" data-icon="dollar" data-transition="pop" data-role="button" data-mini="true">Sell</a></li>
                    <li><a href="#contactus" data-icon="email" data-transition="pop" data-role="button" data-mini="true">Contact Us</a></li>
                </ul>
            </div>
        </div>

アイコンをボタンの中央に表示する方法はありますか? または、これがおそらく起こっている理由を誰かが知っていますか?