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

Question

如何在我的Blog博客中使单个字体真棒图标以特定颜色发光，以及如何将其放置在html编辑器中

Answer 1

This can be done with CSS classes. For example:

HTML

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

CSS

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

This would give a red glowing effect to that particular icon. Make sure your own style.css is loaded after the fontawesome css if using this method.

Alternatively you could create a new CSS class

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

And use that class in the HTML:

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

If Blogger does not allow you to edit style sheets, you could add the CSS inline like so:

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

Answer 2

You can help of box-shadow property:

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