文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在像字体这样的图标上添加阴影效果-真棒

问如何在像字体这样的图标上添加阴影效果-真棒
EN

Stack Overflow用户

提问于 2018-06-08 01:02:14

回答 2查看 15.7K关注 0票数 2

我想在我的图标中添加一个悬停效果的阴影：

有没有办法用css添加阴影效果？这个图标来自于font-awesome。提前谢谢。

css

回答 2

Stack Overflow用户

发布于 2018-06-08 01:10:22

要了解如何使用text-shadow，请查看MDN。

语法为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>

票数 11

Stack Overflow用户

发布于 2018-06-08 01:18:30

您可以像这样使用text-shadow：

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

<shadow></shadow>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50746673

复制

相似问题

问如何在像字体这样的图标上添加阴影效果-真棒
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在像字体这样的图标上添加阴影效果-真棒EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在像字体这样的图标上添加阴影效果-真棒
EN