SVG图标悬停后美化
HTML代码:
<!-------------卡片下面的小图标组---------------->

<div class="row row-cols-1 row-cols-md-4 mt-5">

<div class="col"> <i id="github-icon" class="fab fa-github" data-toggle="modal" data-target="#svg001"></i> </div>

<div class="col"> <i id="github-icon" class="fab fa-microsoft"></i> </div>

<div class="col"> <i id="github-icon" class="fas fa-alien"></i> </div>

<div class="col"> <i id="github-icon" class="fas fa-comments-alt"></i> </div>

</div> <!-------------卡片下面的小图标组---------------->

CSS代码:
<!-------------让SVG图标变色变亮---------------->
<style>
#github-icon {
  color: #279CB6;    /*--- SVG图标默认颜色 --*/
	font-size: 50px;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
#github-icon:hover {
	color: #03e9f4;    /*--- 悬停后SVG图标颜色 --*/
  text-shadow: 0 0 20px rgba(3, 233, 244, 0.3), 0 0 30px rgba(3, 233, 244, 0.3), 0 0 40px rgba(3, 233, 244, 0.3), 0 0 50px rgba(3, 233, 244, 0.3), 0 0 60px rgba(3, 233, 244, 0.3), 0 0 70px rgba(3, 233, 244, 0.3);    /*--- 外发光比阴影更刺眼明亮 --*/
}
</style>
<!-------------让SVG图标变色变亮---------------->