FontAwesome spinning icon misplaced

问题

I've tried to mimic the "icon left - text right" boxes from https://fontawesome.com/ by taking over the style sheets. everything works fine until I apply fa-spin to an icon (see the sample). The icon is then misplaced and not centered.

I was just able to fix the issue by creating a clone of .g-im-icon -> .g-im-icon-for-spin and playing around with the top, left and transform styles.

however I was wondering if there would be a generic solution that would work for both spinning and non spinning icons?

.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;
  position: relative;
}

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

.g-im-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet" />

<div class="g-im-item  k-info-colored">
  <div class="g-im-icon-c">
    <i class="g-im-icon fas fa-tachometer-alt fa-2x"></i>
  </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>


<div class="g-im-item  k-info-colored">
  <div class="g-im-icon-c">
    <i class="g-im-icon fas fa-tachometer-alt fa-spin fa-2x"></i>
  </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>

回答1:

In your .g-im-icon-c class you could implement flexbox in order to center its items instead of using position absolute, this is happening because the transform property get overwritten by your animation.. that is why your animation isn't centered...

.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;
  display: flex;
    justify-content: center;
    align-items: 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;
}

.g-im-icon {
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}

<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet" />

<div class="g-im-item  k-info-colored">
  <div class="g-im-icon-c">
    <i class="g-im-icon fas fa-tachometer-alt fa-2x"></i>
  </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>


<div class="g-im-item  k-info-colored">
  <div class="g-im-icon-c">
    <i class="g-im-icon fas fa-tachometer-alt fa-spin fa-2x"></i>
  </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>

回答2:

As an option, you can try applying negative margin to all spinning icons .fa-spin:

.fa-spin {
  margin-left: -25%;
  margin-top: -25%;
}

来源：https://stackoverflow.com/questions/48301797/fontawesome-spinning-icon-misplaced