如何在像font-awesome这样的图标上添加阴影效果

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>

Answer 2

您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn1">Fade out</button> <p>This is some text</p> <script> $(document).ready(function(){ $(".btn1").click(function(){ $("p").fadeOut(3000) }); }); </script>之类的：

text-shadow

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

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