css - 使用 CSS 定位动画图标并移除重叠

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

试试这个:

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