Equal padding for different sized icons

Question

I'm using Font Awesome icons, and I'd like them to have a background.

The problem is that the icons are different sized so padding will not result equal sized boxes.
Setting the width and height as a block element won't make it centered.

How could I get same sized boxes with the icons centered?

---

The problem:

---

Code:

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

Answer 1

For my solution, I set a and width. I then set text-align to center.

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

CSS Changes

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

I chose 17px because that's the largest width between the two icons.