我尝试模仿来自https://fontawesome.com/的“图标在左 - 文本在右”框,通过接管样式表进行。一切都很好,直到我对一个图标应用fa-spin(请参见示例)。然后图标就会错位并且不居中。
我刚刚通过创建.g-im-icon->.g-im-icon-for-spin的克隆并调整top,left和transform样式来解决了这个问题。
但是我想知道是否有通用的解决方案,可适用于旋转和非旋转图标?
我刚刚通过创建.g-im-icon->.g-im-icon-for-spin的克隆并调整top,left和transform样式来解决了这个问题。
但是我想知道是否有通用的解决方案,可适用于旋转和非旋转图标?
.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>