jquery mobile自定义图标，图标根本不渲染

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 文章如果您想找到更多信息，请查找“自定义图标”一章。