jQuery mobile 客製化icon

by ken tsai

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="home">
    
    
    
    <div data-role="header">
        <a href="#user_info">
            <img src="http://www.iceio.com/images/twitter.png" alt="custom buttom" />
        </a>
        <h1>Header </h1>
    </div>
    
    <div data-role="content">
        
        <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="f">
            <li data-role="list-divider">Custom Icon</li>
            <li>
                <a href="#" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
                    Custom Icon
                </a>
            </li>
        </ul>
        
    </div>
</div>

CSS

.ui-icon-myapp-custom {
    background: url("http://www.idsketching.com/img/twitter_icon2.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}