在jquerymobile中，调整大小后如何居中图标？

Question

有时jqm图标的默认大小太小，所以我尝试调整大小。

与Chrome浏览器开发工具挖后，我发现了如何做到这一点，但是它们的图标被应用下面的CSS后没有定位好：

<a href="#" class="ui-btn ui-icon-ion-ios7-location-outline ui-btn-icon-notext"></a> 

/*icon background*/ 
.ui-btn { 
    font-size: 6rem; 
} 

/*icon*/ 
.ui-btn:after { 
    font-size: 3rem; 
} 

我应该写什么呢CSS？

如果我想圈出图标背景怎么办？

Answer 1

试试这个：

<a href="#" class="ui-btn ui-icon-ion-ios7-location-outline ui-btn-icon-notext ui-icon-big"></a>   
<a href="#" class="ui-btn ui-icon-star ui-btn-icon-notext ui-icon-big"></a> 


/*icon*/ 
.ui-icon-big:after { 
    width: 3rem ; 
    height: 3rem ; 
    margin-left: -1.5rem; 
    margin-top: -1.5rem; 
    font-size: 3rem; 
    background-size: 2.5rem 2.5rem; 
} 

DEMO