css - 在 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