Cut Font Awesome symbol in half?

Question

How could one cut a Font Awesome symbol in half? I don't mean make it half width, I mean actually cut it in half. For example, if I wanted a half circle (fa-circle).

Preferably this would work for all percentages, not just 50%, meaning I could cut symbols in quarters, fifths, tenths, etc.

user_2000051 · Answer

Try this:

i.fa {
  position: relative;
}

i.fa:after {
  bottom: 0;
  content: "";
  position: absolute;
  background: #fff;
  width: 100%;
  height: 50%;
  left: 0;
  right: 0;
}

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2232/

user_2127769 · Answer

You can try this:

HTML

CSS

i {
  position: absolute;
  clip: rect(0px, 16px, 8px, 0px);
}

16px is the font-size of the icon, and 8px is half of the font-size.

Demo

user_5894241 · Answer

One of the ways of doing so would be to overlay a white box on top of the Font Awesome icon.

In the snippet below, I am overlaying the fa-stop icon (i.e. \f04d) on top of the fa-circle icon.

Since I have given the right value of -7px it covers almost half of the circle, but you can tweak that value to suit your requirement.

.fa-overlay{
  position: relative;
}

.fa-overlay:after {
  content: "\f04d";
  position: absolute;
  right:-7px;
  color: white;
}

user_4797603 · Answer

CSS inset box shadow. You'll need to know the pixel size bcs I don't think % is accepted. See example below. Note your background can be an image.

div{
  height:48px;
  width:48px;
  background:blue;
  box-shadow: inset 24px 0px 0px 0px       rgba(0,0,0,0.75);
  
}

user_10299608 · Answer

You can use one of the following as per your requirement.

or

Cut Font Awesome symbol in half?

5 Answers