FontAwesome旋转图标放错了位置 [英] FontAwesome spinning icon misplaced

问题描述

我试图模仿 https://fontawesome.com/中的图标左-文本右"框a>接管样式表.一切正常，直到我将fa-spin应用于图标(请参见示例).然后，该图标放错了位置并且没有居中.

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.

我只是通过创建.g-im-icon-> .g-im-icon-for-spin的克隆并使用顶部，左侧和转换样式来解决此问题.

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>

推荐答案

在您的.g-im-icon-c类中，您可以实现flexbox以便将其项居中而不是使用绝对位置，这是因为转换属性会被动画覆盖..这就是为什么动画没有居中...

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>

这篇关于FontAwesome旋转图标放错了位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！