如何在像真棒字体的图标上添加阴影效果

Question

我想在图标上的悬停效果上添加阴影：

有没有办法使用CSS添加阴影效果？该图标来自font-awesome。提前致谢。

Answer 1

检查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>