如何为fontawesome svg图标添加阴影？

Question

我在一个简单的HTML文档中使用SVG FontAwesome图标，我想为其添加阴影。所以我尝试做...

<div style="text-shadow: 2px 2px 5px #000;">
    <i class="fa fa-search-plus"></i>
</div>

...但是它不起作用。

那么，正确的方法是什么？

谢谢。

Answer 1

text-shadow属性不起作用的原因是，当您使用由javascript加载的svg版本时，Font Awesome不是文本。我尝试使用CSS加载它，并且可以正常工作。

带有CSS的Font Awesome：

.fa-globe{text-shadow:3px 6px rgba(255,165,0,.75)}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

<i class="fas fa-10x fa-globe"></i>

---

这将不起作用。文本阴影无效，而框阴影在正方形周围产生阴影。我确定有解决方法。

.fa-globe{text-shadow:1px 6px rgba(255,165,0,.5)}

.fa-globe{box-shadow:0 .5rem 1rem 0 rgba(255,165,0,.2),0 .375rem 1.25rem 0 rgba(255, 165,0,.19)}

<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js"></script>

<i class="fas fa-10x fa-globe"></i>

---

编辑

您可以添加filter:drop-shadow属性，它将在svg图标周围创建阴影。看看这个LINK。

.fa-globe{filter:drop-shadow(20px 10px 1px red)}

<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js"></script>

<i class="fas fa-10x fa-globe"></i>