如何使字体真棒图标以特定颜色发光

Question

如何在我的博主博客中让个别字体很棒的图标以特定颜色发光，以及我将它放在 html 编辑器中的确切位置

Answer 1

这可以用 CSS classes 来完成。例如：

HTML

<i class="fa fa-address-book" aria-hidden="true"></i>

CSS

.fa-address-book {
  color: #ff0000;
  text-shadow: 0 0 3px #ff0000;
}

这会给该特定图标带来红色发光效果。 如果使用此方法，请确保在 fontawesome css 之后加载您自己的 style.css。

或者您可以创建一个新的 CSS class

.redGlow {
  color: #ff0000;
  text-shadow: 0 0 3px #ff0000;
}

并在 HTML 中使用 class:

<i class="fa fa-address-book redGlow" aria-hidden="true"></i>

如果 Blogger 不允许您编辑样式表，您可以像这样添加 CSS 内联：

 <i class="fa fa-address-book" aria-hidden="true" style=“color: #ff0000; text-shadow: 0 0 3px #ff0000;”></i>

Answer 2

你可以帮助 box-shadow 属性:

.fa-pied-piper-alt {
  color: #FFF;
  box-shadow: 0 0 30px 3px red;
  font-size: 50px;
  background-color: rgba(255,0,0,0.7);
  margin:50px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-pied-piper-alt"></span>

如何使字体真棒图标以特定颜色发光

How do I make a font awesome icon glow with a specific color

html

css

blogger

font-awesome