等于不同大小的图标填充

Question

我使用Font Awesome图标，我希望他们有背景。

问题是图标大小不同，因此padding不会产生相同大小的框 将width和height设置为块元素不会使其居中。

如何在图标居中的情况下获得相同大小的框？

---

问题：

---

代码：

i {
margin: 15px;
display: inline-block;
float: right;
padding: 15px 15px;
border-radius: 10px;
background: #FFFF00;
}

Answer 1

对于我的解决方案，我设置了一个和width。然后，我将text-align设置为center。

http://jsfiddle.net/B4zfE/5/

CSS更改

i {
 /* Rest of CSS */
 text-align: center;
 width: 17px;
}

我之所以选择17px，是因为它是两个图标之间的最大宽度。