css: показать иконку в виде шрифта в два раза - PullRequest
Новая
       10

css: показать иконку в виде шрифта в два раза

0 голосов
/ 22 мая 2018

Я использую набор иконок на основе шрифта (в моем случае font-awesome 4.7 icons), который используется примерно так: 

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

Что я хотел бы сделать, это наложить треугольник в правом нижнем углуугол, чтобы он выглядел аналогично значку fa-eye-slash.

Можно ли добавить класс css (например, <i class="fa fa-eye bottom-right-triangle"></i>), который перекрывает треугольник и, таким образом, скрывает половину значка?

1 Ответ

0 голосов
/ 22 мая 2018

Вы можете попробовать что-то подобное, используя 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>
...