JqueryMbile with Font Awesome

by Prasad

HTML

<div data-role="page" data-theme="c">	
	<!--Header Begins-->	
    <div data-role="header" data-theme="c" id="top_header" data-type="horizontal">
    	<div class="content_left">
	    	<a href="#xyzpan1" data-role="button" data-icon="leftpan" data-iconpos="notext" data-inline="true"></a>        
    	</div>
    	<div id="logo_img">
            <a href="#" data-role="none">
                <img src="images/logo.png" height="30" alt="logo">        
            </a>
        </div>
        <div class="content_right">
            <a data-role="button" href="#" data-icon="search" data-iconpos="notext" data-inline="true" ></a>
            <a data-role="button" href="#" data-icon="gear" data-iconpos="notext" data-inline="true"></a>
        </div>
    </div>
    <!--Header Ends-->
    <!--contents begins-->
    <div data-role="content">
    	<!--search filter begins-->
        <div class="gray">
        	<input type="search" id="search_basic">
        </div>
        <!--search filter begins-->
        <div class="todays_deal">
        	<div id="today_deal_title">Today's Deals</div>
        	<div>
                <span id="today_deal_img">
                <img src="images/xperias.gif"  alt="xperiarc" height="116" width="150">
                </span>
                <span id="today_deal_imgdesc">
                   <div id="title">
                    	Xperia Arc S
                   </div>
                   <div id="subtitle">
                   		(Black/White)
                   </div> 
            	   <div id="price">
                    	$519
                   </div>
                   <div id="buy_btn">
	                <a href="#" data-role="button" data-theme="b" data-mini="true">Buy Now</a>
                 </div>
                </span>
                <div class="clear"></div>
                
              </div>
        </div>
        <!--today's deal box ends-->
        <div class="tbl">
        	<!--Column Begins-->
        	<div class="tbl_cols">
           ...

CSS

/*Content styles*/
.ui-content{border-width:0;overflow:visible;overflow-x:hidden;padding:0 0; background:#dcdcdc;}
/*Button styles*/
/*font family for buttons Helvetica Neuea*/
.ui-listview > .ui-li.ui-first-child,.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit{-webkit-border-top-right-radius:2px;border-top-right-radius:2px;-webkit-border-top-left-radius:2px;border-top-left-radius:2px;
border:1px solid #b3b1b1; margin: 3px 0;
}
.ui-btn-up-a{border:1px solid #111;background:#333;font-weight:bold;color:#fff;/*text-shadow:0 1px 1px #111;*/background-image:-webkit-gradient(linear,left top,left bottom,from( #fff ),to( #fff ));background-image:-webkit-linear-gradient( #fff,#fff );background-image:-moz-linear-gradient( #fff,#fff );background-image:-ms-linear-gradient( #fff,#fff );background-image:-o-linear-gradient( #fff,#fff );background-image:linear-gradient( #fff,#fff )}
.ui-btn-up-a:visited,.ui-btn-up-a a.ui-link-inherit{color:#fff}.ui-btn-hover-a{border:1px solid #000;background:#444;font-weight:bold;color:#fff;/*text-shadow:0 1px 1px #111;*/background-image:-webkit-gradient(linear,left top,left bottom,from( #555 ),to( #383838 ));background-image:-webkit-linear-gradient( #555,#383838 );background-image:-moz-linear-gradient( #555,#383838 );background-image:-ms-linear-gradient( #555,#383838 );background-image:-o-linear-gradient( #555,#383838 );background-image:linear-gradient( #555,#383838 )}.ui-btn-hover-a:visited,.ui-btn-hover-a:hover,.ui-btn-hover-a a.ui-link-inherit{color:#fff}.ui-btn-down-a{border:1px solid #000;background:#222;font-weight:bold;color:#fff;text-shadow:0 1px 1px #111;background-image:-webkit-gradient(linear,left top,left bottom,from( #202020 ),to( #2c2c2c ));background-image:-webkit-linear-gradient( #202020,#2c2c2c );background-image:-moz-linear-gradient( #202020,#2c2c2c );background-image:-ms-linear-gradient( #202020,#2c2c2c );background-image:-o-linear-gradient( #202020,#2c2c2c );background-image:linear-gradient(...