Font Awesome: How to make the background-color out of the shape delimitation transparent?

1
votes

Let's say I have this font-awesome icon:

<i class="fa fa-times-circle pull-right fa-2x" style="background-color: white; color: red;" aria-hidden="true"></i><

With the body background set to black

body {  
  background-color: black;
}

I would like the background that delimits the shape to be transparent (so like the body backround black while the inner background within the circle remaining white), is it actually possible?

http://jsfiddle.net/8u39n0sq/

Basically how to avoid the square thing this big white ugly square while the background-color of center of the shape is white?

4
cssfont-awesome
So, you mean the blue part to be transparent while the f remains white? - user7207170
@Highdef sorry it was the wrong fiddle, just updated my post. - Natalie Perret
One absolute alternative would be to upgrade to Font Awesome 5. You could take advantage of its layered icons and just use a circle with a times symbol in it and color both. - Robert
Instead of passing the color directly, you can make use of radial gradiant to color the portion you need and rest could be transparent. I've provided a solution :) - user7207170

4 Answers

7
votes

You can make use of radial-gradient(white 50%, transparent 50%) and tweak it around according to your need. Hope, this helps :)

Fiddle: http://jsfiddle.net/8u39n0sq/2/

body{
background:black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<i class="fa fa-times-circle pull-right fa-2x" style="background: radial-gradient(white 50%, transparent 50%); color: red;" aria-hidden="true"></i>
3
votes

It's a bit of a workaround, but you can consider adding an :after pseudo element in order to add a white background behind the icon:

body {
  background-color: black !important;
}

i {
  color: red;
  position: relative;
}

i:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: white;
  z-index: 0;
  border-radius: 100%;
}

i:before {
  z-index: 1;
  position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<i class="fa fa-times-circle pull-left fa-2x" ></i>

It basically creates a white circular element, and arranges it behind the icon using z-index. I used 4px in top, right, bottom and left properties in order to make sure the white background doesn't go out of the icon's boundaries.

1
votes

background-color:transparent put it on the span.

i.e. <span class="fa-stack fa-lg icon-facebook" style="background-color:transparent"> you can put it in a class if you want.

I've supplied a working fiddle here.

0
votes

I ended up using several fa-stack with the inner shape I wanted to use.

<span class="fa-stack fa-lg success">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-check fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg error">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>

Although it defeats the purpose of delimiting the background: http://jsfiddle.net/cLpybq20/

Not exactly the same as the glyphs I was using but it fits my needs and appear less tweak-ish.