For my solution, I set a and width
. I then set text-align
to center
.
CSS Changes
i {
/* Rest of CSS */
text-align: center;
width: 17px;
}
I chose 17px
because that's the largest width between the two 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;
}
Solution
For my solution, I set a and width
. I then set text-align
to center
.
CSS Changes
i {
/* Rest of CSS */
text-align: center;
width: 17px;
}
I chose 17px
because that's the largest width between the two icons.