Как добавить внутреннюю тень на иконку Font awesome

Question

Дело в том что в text-shadow не работает inset, хотелось бы вот так как в box-shadow

box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.36);

А у меня пока что так

input:focus ~ label > i {
  background-image: linear-gradient(
   120deg,
   rgba(0, 0, 0) 0%,
   rgba(230, 230, 230) 10%,
   rgba(255, 255, 255) 100%
  );
 text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.36);
}

Answer 1

Пример

.fas {
  color: rgba(192, 192, 192, .65);
  font-size: 10vw;
  text-shadow: 0px 2px 2px #fff, 0 0 0 #000, 1px 4px 6px transparent; 
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<i class="fas fa-search-plus"></i>

Также еще как вариант - использовать svg + filter: drop-shadow(...)

БЛОГ НА HUSL

Как добавить внутреннюю тень на иконку Font awesome

Ответы (1 шт):