jQuery Mobile 1.4 - header icons no circle

by katalin_2003

HTML

<div data-role="page" id="one">
    <div data-role="header" data-theme="b"> <a id="btnSettings" href="#settings" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-nodisc-icon" data-transition="flip"></a>
 <a href="#" id="disconnect" class="ui-btn ui-btn-right ui-nodisc-icon ui-icon-delete ui-btn-icon-notext ui-corner-all"></a>

         <h3>Multi-page</h3>

    </div>
    <!-- /header -->
    <div data-role="content">Here is the page content</div>
    <!-- /content -->
</div>
<!-- /page one -->

CSS

#btnSettings {
    background-color: transparent;
    border: 0;
}
#btnSettings:after {
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    margin-left: -15px;
    margin-top: -15px;
}
#disconnect {
    background-color: transparent;
    border: 0;
}
#disconnect::after {
    height: 30px;
    width: 30px;
    background-size: 30px 30px;
    margin-left: -15px;
    margin-top: -15px;
}
div[data-role="header"] {
    background-color: #FF0000 !important;
}