Как добавить эффекты тени на иконки, такие как font-awesome

Question

Я хочу добавить тень на эффект при наведении на мою иконку:

Есть ли способдобавить эффект тени с помощью CSS?Значок от шрифта-удивительный.Заранее спасибо.

Answer 1

Вы можете использовать text-shadow как:

shadow:before {
    font-family: 'FontAwesome';
    content:"\f0c9";
    padding:0 5px 0 15px;   
    font-size: 300px;
    text-shadow: 10px 10px 10px blue;
} 

<shadow></shadow>

http://jsfiddle.net/RezaScript/z35hdr6y/

Answer 2

Отметьте MDN , чтобы узнать, как использовать text-shadow.

Синтаксис offset-x | offset-y | blur-radius | color:

.icon-red {
  color: #c00000;
  text-shadow: 0 0 10px blue;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<i class="fas fa-3x fa-heart icon-red"></i>