Question

我正在尝试将图标置于右侧，将标签置于中心位置。我的网站使用的是BootStrap和Font-Awesome。以下是HTML：

<div class="row">
  <div class="col-lg-12" style="text-align: center">
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Health</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
    </a>
    <span>&nbsp;</span>
    <i class="fa fa-heart faa-pulse animated" style="float:right;"></i>&nbsp;&nbsp;&nbsp;
    <i class="fa fa-star faa-pulse animated" style="float:right;"></i>&nbsp;&nbsp;&nbsp;
    <i class="fa fa-smile-o faa-pulse animated" style="float:right;"></i>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <h1 class="post-header" style="text-align: center">This is the header</h1>
  </div>
</div>

CSS：

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 2s linear infinite !important;
  animation: pulse 2s linear infinite !important;
  font-size:1.8em;  
}
.fa-heart {
    color: red !important;
}
.fa-star {
    color: gold !important;
}
.fa-smile-o {
  color: deeppink !important;
}

问题是我的图标在动画过程中彼此重叠，而且标签没有与中心对齐。此外，图标之间的空间非常小。我该如何解决这个问题？

以下是demo

Answer 1

试试这个：

重新格式化HTML：

<div class="row">
  <div class="col-lg-12 text-center">
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Health</span>
    </a>

    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
    </a>

    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
    </a>
    <span class="animated-icons"> 
    <i class="fa fa-heart faa-pulse animated"></i>
    <i class="fa fa-star faa-pulse animated" ></i>
    <i class="fa fa-smile-o faa-pulse animated" ></i>
    </span>

  </div>
</div>

CSS：

.animated-icons {
  position: absolute;
  right: 15px;
}

Answer 2

有两种方法可以做到这一点，

来自用户指南示例http://fontawesome.io/examples/

使用fa-fw以固定宽度设置图标。当不同的图标宽度甩开对齐时很好用。特别适用于导航列表和列表组。

 <div class="row">

   <!-- edited (1) -->
  <div class="col-lg-12" style="text-align: center;position: relative;">
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Health</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
    </a>
    <span>&nbsp;</span>
    <a href="#" style="text-decoration: none;">
      <span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
    </a>  

    <!-- edited  (2) -->
    <div style="position: absolute;top: 0;right: 0;">
        <i class="fa fa-fw fa-heart faa-pulse animated" ></i>
        <i class="fa fa-fw fa-star faa-pulse animated" ></i>
        <i class="fa fa-fw fa-smile-o faa-pulse animated" ></i>
    </div>

  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <h1 class="post-header" style="text-align: center">This is the header</h1>
  </div>
</div>

或者你可以改变css

.faa-pulse{
  margin:3px;
}

请参阅此https://jsfiddle.net/jayakrishnancn/73Lfxnpg/3/

Answer 3

尝试为字体添加边距很棒的图标

i.fa
{
  margin:4px;
}

希望这有助于......：D

定位动画图标并使用CSS删除重叠

3 个答案: