FontAwesome旋转图标错位：求适配旋转/非旋转图标的通用方案

嘿，我完全懂你遇到的这个坑！fa-spin导致图标错位的核心原因其实是CSS transform属性的覆盖问题，咱们一步步拆解，给你几个通用的解决思路：

问题根源分析 #

你原来的.g-im-icon用了transform: translate(-50%, -50%)来实现居中，但Font Awesome的fa-spin动画是这样定义的：

.fa-spin {
  animation: fa-spin 2s infinite linear;
}
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

动画里的transform会直接覆盖你写的translate，导致居中效果失效，图标自然就错位了。

通用解决方案 #

方案1：改用Flex布局居中（最推荐） #

放弃绝对定位的居中方式，直接让图标容器.g-im-icon-c成为Flex容器，用Flex的居中能力来对齐图标——这种方式完全不受旋转动画影响，代码也更简洁：

修改后的CSS：

.g-im-item { 
  border-radius: .25rem; 
  box-shadow: 0 0.25rem 0.125rem 0 rgba(33, 37, 41, .05); 
  margin-bottom: 1.5rem; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
}
.g-im-icon-c { 
  width: 25%; 
  font-size: 1.95312rem; 
  /* 新增Flex居中属性 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-im-text-c { padding: 1.5rem; width: 75%; }
.g-im-title { font-family: fa5-proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif; margin-top: 0; margin-bottom: .5rem; font-weight: 600; }
.g-im-message { margin-top: 0; margin-bottom: 0; line-height: 1.5; }
/* 删掉原来的绝对定位和transform */
.g-im-icon {
  position: static;
}

HTML不需要任何修改，不管图标加不加fa-spin，都会稳稳地居中在容器里。

方案2：嵌套元素分离居中与旋转 #

如果一定要保留绝对定位的布局，可以把图标放在一个嵌套容器里：外层容器负责居中，内层图标负责旋转，这样两者的transform就不会冲突了。

修改后的HTML：

<div class="g-im-item k-info-colored">
  <div class="g-im-icon-c">
    <div class="g-im-icon"> <!-- 外层负责居中 -->
      <i class="fas fa-tachometer-alt fa-spin fa-2x"></i> <!-- 内层负责旋转 -->
    </div>
  </div>
  <div class="g-im-text-c">
    <h3 class="g-im-title">Title goes here</h3>
    <p class="g-im-message">Test goes here</p>
  </div>
</div>

CSS保持你原来的.g-im-icon样式即可，不需要额外修改——旋转的是内层的<i>元素，外层的<div>依然保持居中定位。

方案3：自定义旋转动画（兼容原有定位） #

如果你不想改布局或结构，可以自定义一个包含居中translate的旋转动画，替换Font Awesome的fa-spin：

/* 自定义包含居中的旋转动画 */
.my-fa-spin {
  animation: my-fa-spin 2s infinite linear;
}
@keyframes my-fa-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

然后把HTML里的fa-spin换成my-fa-spin，这样动画会同时应用居中和平移，不会覆盖原有效果。

总结 #

最推荐方案1的Flex布局，它不仅解决了旋转错位问题，还让代码更简洁易维护，完全适配旋转与非旋转图标的场景，不需要额外的类或嵌套。

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