html - css:显示减半的基于字体的图标

Question

我使用基于字体的图标集(在我的例子中是 font-awesome 4.7 图标)，它是这样使用的:

<i class="fa fa-eye"></i>

我想做的是在右下角覆盖一个三 Angular 形，这样它看起来就类似于 fa-eye-slash 图标。

是否可以添加一个覆盖三 Angular 形的 css 类(如 <i class="fa fa-eye bottom-right-triangle"></i>)，从而遮盖图标的一半？

Answer 1

您可以尝试使用 linear-gradient 和伪元素作为 ovrelay:

.hide {
  position:relative;
}
.hide:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
  background:linear-gradient(to bottom right,transparent 50%,#fff 50.5%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<i class="fas fa-eye fa-5x hide"></i>