Как я могу добавить тень на красивые иконки SVG? - PullRequest
Новая
       11

Как я могу добавить тень на красивые иконки SVG?

0 голосов
/ 29 января 2019

Я использую значки SVG FontAwesome в простом HTML-документе и хочу добавить к ним тени.Поэтому я попытался сделать ... 

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

... но это не работает.

Итак, как правильно это сделать?

Заранее спасибо.

1 Ответ

0 голосов
/ 31 января 2019

Причина, по которой свойство text-shadow не работает, заключается в том, что Font Awesome НЕ является текстом, когда вы используете версию svg, загруженную javascript.Я попытался загрузить его с помощью css, и он работает.

Шрифт Awesome загружен с помощью CSS: 

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

Это НЕ будет работать.Текст-тень не имеет никакого эффекта, а box-shadow создает тень вокруг квадрата.Я уверен, что есть обходной путь. 

.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,Проверьте это ССЫЛКА . 

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