css：显示基于字体的图标减半

Question

我使用基于字体的iconset（在我的情况下是font-awesome 4.7图标），使用如下：

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

我想要做的是在右下角覆盖一个三角形，使其看起来与fa-eye-slash图标类似。

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

Answer 1

您可以使用linear-gradient和伪元素作为ovrelay尝试这样的事情：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;