how to stylize a circle Fontawesome icon background?

Question

Is there is a simple way to stylize the Fontawesome icons background properly? I was trying to do it with the icon-remove-sign (which has the particularity to be a circle) icon in order to make appear the cross in white and the circle in red.

The difficulty is that the icon is recognize as a square, so i was trying to make it a circle in order to apply the red background color (but i am wondering if there is not something simpler):

.icon-remove-sign {
    padding: 0;
    border-radius: 25px;
    color: white;
    background-color: red;
}

But it's not enough, we can see the red background at the top of the icon.

How would you do it ?

Answer 1

With fontawesome you can use stacked icons like this:

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

Answer 2

It feels a little hacky, but I managed to get it working here:

http://jsfiddle.net/3FvxA/

display:block and giving it a height and width seems to be the secret.

Answer 3

Assuming that your HTML looks like this:

<div class="social-circle">
  <a class="fa fa-facebook" href="#"></a>
  <a class="fa fa-twitter" href="#"></a>
  <a class="fa fa-pinterest-p" href="#"></a>
</div>

You can do something like:

.social-circle [class*="fa fa-"] {
  width: 25px;
  height: 25px;
  color: white;
  background-color: grey;
  border-radius: 25px;
  display: inline-block;
  line-height: 25px;
  margin: auto 3px;
  font-size: 15px;
  text-align: center;
}
.fa-facebook:hover { 
    background-color: #3B5A9B; 
}
.fa-twitter:hover { 
    background-color: #4FC6F8; 
}
.fa-pinterest-p:hover { 
    background-color: #CA2128; 
}

See the example here : http://jsfiddle.net/k69xj2n8/