如何缩小Font Awesome图标？hover变色后图标未缩小问题求助

你的代码只实现了图标悬停变红的效果，完全没写控制图标缩小的样式，所以悬停时图标自然不会缩小。

如果想要同时实现悬停变红+缩小的效果，修改CSS即可：

• 给transition属性加上transform，让缩放也有平滑过渡
• 在hover样式里添加transform: scale()来设置缩小比例（比如scale(0.8)就是缩小到原尺寸的80%）

修正后的完整代码：

<style> 
.youtube-icon { 
  color: black; /* 初始颜色 */ 
  font-size: 30px; /* 图标初始大小 */ 
  transition: color 0.3s, transform 0.3s; /* 同时给颜色和缩放加过渡动画 */ 
  line-height: 1; /* 消除额外间距 */
}
.youtube-icon:hover { 
  color: red; /* 悬停时的颜色 */
  transform: scale(0.8); /* 悬停时缩小到原尺寸的80%，可自行调整数值 */
}
</style> 
<i class="fab fa-youtube youtube-icon"></i> 

另外补充：如果你的需求只是变红，那原代码本身是没问题的——如果变红效果也没生效，检查下Font Awesome的资源有没有正确引入（比如是否加载了fab类对应的字体文件）。

内容的提问来源于stack exchange，提问作者NothingButTyler backup