能否通过CSS类为Font Awesome图标添加右下角遮罩三角形模拟eye-slash？

完全可以通过自定义CSS类来给Font Awesome的fa-eye图标叠加一个三角形，模拟出类似fa-eye-slash的视觉效果，只需要你提到的bottom-right-triangle类就够了，不需要额外的HTML元素。

实现思路 #

我们利用CSS伪元素::after来创建这个三角形，通过绝对定位把它放在图标的右下角，用与背景色一致的三角形遮挡住图标的一部分，达到类似“斜切”的视觉效果。

完整代码示例 #

首先是CSS部分：

/* 给图标容器设置相对定位，让伪元素可以基于它定位 */
.bottom-right-triangle {
  position: relative;
  display: inline-block; /* 确保定位生效，解决部分对齐问题 */
}

/* 用伪元素创建右下角的三角形 */
.bottom-right-triangle::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  /* 用边框绘制三角形：左侧透明边框+底部实心边框组合出三角形形状 */
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-bottom: 1em solid #ffffff; /* 这里的颜色要和图标所在的背景色一致 */
  /* 微调位置，让三角形刚好覆盖图标右下角的区域 */
  transform: translate(15%, 15%);
}

然后在HTML里直接使用：

<i class="fa fa-eye bottom-right-triangle"></i>

细节调整 #

• 自适应图标大小：代码里用em作为单位，所以如果你使用fa-lg、fa-2x等类调整图标大小，三角形会自动跟着缩放，不需要额外修改。
• 背景色适配：如果你的图标不是放在白色背景上，把border-bottom的颜色改成对应的背景色即可，这样三角形才能完美“遮挡”图标。
• 位置微调：可以调整transform里的百分比数值，或者修改bottom/right的数值，让三角形的位置更贴合你的需求，更接近fa-eye-slash的视觉效果。

内容的提问来源于stack exchange，提问作者Roland Seuhs