如何给一个fontawesome的svg图标添加阴影？

Question

我正在一个简单的HTML文档中使用SVG Font Awesome图标，并希望给它们添加阴影。所以我尝试做了一下...

我在CSS中添加了box-shadow属性，但它似乎并没有生效。你有任何想法吗？

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

...但它没有起作用。

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

- oramoetaro

Answer 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图标周围创建一个阴影。

文档：https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

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

- Jakub Muda

Answer 2

针对OP的情况，它是使用HTML插入图标，因此过滤选项对我无效，以下方法解决了问题：

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

我使用逗号进行分隔，以添加其他阴影，使图标核心颜色更加强烈，并且离它越远的部分更模糊。

- Pepe Alvarez

Answer 3

我知道这篇帖子很旧，但是我找到了一个优雅的解决方案。FontAwesome有一个将样式内联到主DOM的head元素中的JavaScript。你可以禁用它，并且将CSS内联到你的Shadow DOM中：

```javascript import { config, dom } from '@fortawesome/fontawesome-svg-core' config.autoAddCss = false ```

<style>{dom.css()}</style>

- TakaGoto