Question

怎么能把一个Font Awesome符号切成两半？我不是说把它做成半宽，我的意思是把它切成两半。例如，如果我想要一个半圈（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;
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2232/

Answer 2

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

在下面的代码段中，我将fa-stop图标（即\f04d）覆盖在fa-circle图标的顶部。

由于我right的{{1}}值为-7px，因此它几乎覆盖了一半，但您可以调整该值以满足您的要求。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

你可以试试这个：

<强> HTML

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

<强> CSS

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

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

Demo

Answer 4

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

＆＃13;

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

＆＃13;

<div>
   
</div>

＆＃13;

Answer 5

您可以根据需要使用以下选项之一。

<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>

或

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

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

5 个答案: