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.

Answer 1

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/

Answer 2

You can try this:

HTML

<i class="fa fa-circle" aria-hidden="true"></i>

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