jquery mobile custom icon, icon is not rendered at all

Question

I'm trying to create jquery mobile navbar custom icon.

#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>

I'm getting navbar button rendered but without icon

Update: rendered html is

<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

This is how you do it: 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');
}

More info

Read this article if you want to find more, look for chapter "Custom icons" .