JQuery Tabs自定义图标不能很好地工作

Question

我需要使用自定义图标进行标签导航，因此我通过此示例找到了很多网站和foruns：

<style> 
    .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
    .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
    #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
    #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
    #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
    #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
    #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
</style>

<div data-role="footer" class="nav-glyphish-example">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul>
        <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
        <li><a href="#" id="email" data-icon="custom">Email</a></li>
        <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
        <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
        <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
    </ul>
    </div>
</div>

非常好用。

但是现在我需要在这个标签上添加一些内容，现在我遇到了很多问题，页面变得疯狂而且效果不好。

所以我试试这段代码：

<style> 
    .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
    .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
    #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
    #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
    #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
    #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
    #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
</style>

<div data-role="footer" class="nav-glyphish-example">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul>
        <li><a href="#chatTab" id="chat" data-icon="custom">Chat</a></li>
        <li><a href="#emailTab" id="email" data-icon="custom">Email</a></li>
        <li><a href="#skullTab" id="skull" data-icon="custom">Danger</a></li>
        <li><a href="#beerTab" id="beer" data-icon="custom">Beer</a></li>
        <li><a href="#coffeeTab" id="coffee" data-icon="custom">Coffee</a></li>
    </ul>
    </div>

    <div id="chatTab">
        chatTab
    </div>

    <div id="emailTab">
        emailTab
    </div>

    <div id="skullTab">
        skullTab
    </div>

    <div id="beerTab">
        beerTab
    </div>

    <div id="coffeeTab">
        coffeeTab
    </div>
</div>

任何人都可以帮助我吗？