用於不同大小的圖標的同等填充

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，因爲這是兩個圖標之間的最大寬度。