削减字体真棒符号的一半？

Question

怎么能把一个字体真棒符号切成两半？我不是说把它做成半宽，我的意思是把它切成两半。例如，如果我想要一个半圈（fa-circle）。

优选地，这适用于所有百分比，而不仅仅是50％，这意味着我可以在四分之一，五分之一，十分之一等中切割符号。

Answer 1

试试这个：

i.fa {
  position: relative;
}

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

但是：ぁzxswい

Answer 2

其中一种方法是在Font Awesome图标上叠加一个白框。

在下面的片段中，我将http://jsfiddle.net/lotusgodkk/GCu2D/2232/图标（即fa-stop）覆盖在\f04d图标的顶部。

由于我给出了fa-circle的right值，它覆盖了几乎一半的圆圈，但你可以调整该值来满足你的要求。

-7px

.fa-overlay{
  position: relative;
}

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

Answer 3

你可以试试这个：

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-circle fa-overlay"></span>

CSS

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

16px是图标的字体大小，8px是字体大小的一半。

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

Answer 4

CSS插入框阴影。您需要知道像素大小bcs我不认为％被接受。见下面的例子。请注意，您的背景可以是图像。

Demo

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

Answer 5

您可以根据您的要求使用以下其中一项。

<div>
   
</div>

要么

<i class="fa fa-circle" style="width: 25%; overflow: hidden;"></i>

要么

<i class="fa fa-circle fa-flip-horizontal" style="width: 25%; overflow: hidden;"></i>

要么

<i class="fa fa-circle" style="height: 25%; overflow: hidden;"></i>