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

【问题标题】：How can I add shadow to a fontawesome svg icons?如何为 fontawesome svg 图标添加阴影？
【发布时间】：2019-01-29 17:06:03
【问题描述】：

我在一个简单的 HTML 文档中使用 SVG Font Awesome 图标，我想给它们添加阴影。所以我试着做...

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

...但它不起作用。

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

【问题讨论】：

【解决方案1】：

使用 CSS filter: drop-shadow(...)。

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>

这行不通。 text-shadow 没有效果，而 box-shadow 会在正方形周围产生阴影。

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

.fa-globe{box-shadow:0 .5rem 1rem 0 rgba(255,0,0,.5),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 图标周围创建阴影。

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

【讨论】：

【解决方案2】：

对于OP的情况，它是用html插入图标，所以过滤器选项对我不起作用，诀窍如下：

.icon-container i {
    text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000;
}

我用逗号分隔它，以便添加一些其他阴影，使靠近图标核心的颜色更强烈，离它越远的颜色越模糊。

【讨论】：