How do I center a font awesome icon inside of a button?

Question

I am trying to create a small button with a X (font-awesome's <i class="fa fa-close"></i>). I am trying to make it look something like this:

However, I am facing some issues with getting the X centered inside the button.

Here is the markup:

<button class="cart-remove">
  <i class="fa fa-close"></i>
</button>

And the css:

.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center !important;
}

Unfortunately the font-awesome close icon does not center, it appears at the bottom right. How can I fix this? I thought text-align center centers the stuff inside that element?

Thanks

Answer 1

You can try centering it with flexbox applied to the i element

$('.cart-remove').click(function() {
	var currentCount = $(this).attr('increaseorator');
  var currentCountParsed = parseInt(currentCount);
  var currentWH = currentCountParsed + 20;
  $(this).css({
  	'width' : currentWH,
    'height' : currentWH
  });
  $(this).attr('increaseorator', currentWH);  
});

.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #CCC;
    border-radius: 50%;
    color: black;
}
.cart-remove i {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ignore, styling */
* { outline: 0; }
*::-moz-focus-inner { border: 0; }

.cart-remove {
  border: 1px solid hsla(0, 0%, 0%, 0.5);
  background-color: hsla(0, 0%, 70%, 1);
}
.cart-remove:hover {
  background-color: red; 
}
instructions {
  position: absolute;
  width: 100%;
  left: 50%;  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="cart-remove" style="width: 20px; height: 20px;" increaseorator="20">
  <i class="fa fa-close"></i>
</button>

<instructions>click the x to enlarge, it should remain centered</instructions>

fiddle

https://jsfiddle.net/Hastig/esuxa4b6/2/