jquery移动自定义图标，图标根本不呈现

Question

我正在尝试创建jquery移动导航栏自定义图标。

#football .ui-icon {
    background: url('/Content/images/icon-football.png') no-repeat rgba(0, 0, 0, 0.4) !important;
    background-size: 22px 22px;
}

<div data-role="navbar" data-theme="b" data-grid="c">
    <ul>
        <li>
            <a href="/somelink" id="#football" data-icon="football" data-theme="b">football</a>
        </li>
        ...
    </ul>
</div>

我正在渲染导航栏按钮但没有图标

更新： 渲染的html是

<a id="#football" class="ui-link ui-btn ui-btn-b ui-icon-football ui-btn-icon-top" data-theme="b" data-icon="football" href="/">Football </a>

Answer 1

您就是这样做的：http://jsfiddle.net/VCypt/

HTML：

<div data-role="navbar" data-theme="b" data-grid="c">
    <ul>
        <li>
            <a href="/somelink" id="#football" data-icon="football" data-theme="b">football</a>
        </li>
        ...
    </ul>
</div>

CSS：

.ui-icon-football:after {
    background-image: url('http://png-5.findicons.com/files/icons/546/sport/16/football.png');
}

更多信息

如果您想查找更多内容，请阅读 this 文章，查找章节“自定义图标”。