Bootstrap Icon鼠标悬停缩放效果失效问题求助

你的图标悬停缩放效果不生效，核心原因是Bootstrap Icons 依赖的 <i> 标签默认是行内元素，而 CSS 的 transform 属性无法作用于行内元素。

修改后的CSS代码 #

.bi-icon i {
  /* color: white; */
  padding: 8px;
  padding-left: 0px;
  /* 关键：将行内元素改为行内块级，让transform生效 */
  display: inline-block;
  /* 可选：添加过渡动画，让缩放更平滑 */
  transition: transform 0.3s ease;
}

.bi-icon i:hover {
  transform: scale(1.5); /* 按需求设置为1.5倍缩放 */
}

补充说明 #

• 必须给<i>标签添加display: inline-block，才能让transform属性正常生效
• 额外加入transition属性可以让缩放过程更流畅，优化交互体验
• 注意你原代码里写的是scale(2)，如果目标是1.5倍记得调整数值
• 你的JSX中className="bi-icon"的写法是正确的，符合React的语法要求

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