css - Equal padding for different sized icons -

I am using Font Awesome icons, and I want them to have backgrounds.

The problem is that the symbols are of different sizes, so the padding will not result in the same size box.
Set width and height as a block

Problem : < / P>

size difference

Code :

i {margin: 15px; Display: Inline-block; float right; Padding: 15px 15px; Range radius: 10px; Background: #FFFF0000; }

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

CSS changes

  i / / rest css * / text-line: center; Width: 17px; }

I chose 17px because it is the largest width between the two icons.

City