css - 如何在 font-awesome 之类的图标上添加阴影效果

Question

我想在我的图标中添加悬停效果的阴影:

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

Answer 1

检查 MDN学习如何使用 text-shadow。

语法是offset-x |偏移-y |模糊半径 |颜色:

.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>