Jquery Mobile - Header with 2 icons and text

This jquery mobile example shows how to add two icons to the header and adding text to the left of the icon which is at the right.

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="content">
    <div data-role="header"  data-theme="b">
       <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-left"> Home </a>
        <h1>Header</h1>
      <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-right"> Contact Us </a>
    </div>
</div>

CSS

.btn_round
{
	-moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
	-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
	box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
	
	-moz-border-radius:             1.5em !important;
    -webkit-border-radius:          1.5em !important;
    border-radius:                  1.5em !important;
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(17, 17, 17);
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
    text-shadow: rgb(17, 17, 17) 0px 1px 1px;   
}
.btn_round:after{
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}