Position animated icons and remove overlapping using CSS - css

Question

I am trying to position the icons to the right and the tags to the center.
My website is using BootStrap and Font-Awesome. Below is the 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> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
</a>
<span> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Safety</span>
</a>
<span> </span>
<i class="fa fa-heart faa-pulse animated" style="float:right;"></i>
<i class="fa fa-star faa-pulse animated" style="float:right;"></i>
<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;
}
The problem is my icons are overlapping with each other during animation and the tags are not aligned to the center. Also,there is very little space between the icons. How can I solve this problem?
Here is the demo

Answer 1

Try this:
Re-formated 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

There are 2 ways to do this,
from user guide example http://fontawesome.io/examples/
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.
<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> </span>
<a href="#" style="text-decoration: none;">
<span style="background-color: #171717; color: #FFF; padding: 2px">Fitness</span>
</a>
<span> </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>
or u could change css
.faa-pulse{
margin:3px;
}
see this https://jsfiddle.net/jayakrishnancn/73Lfxnpg/3/

Answer 3

Try Adding margin to the font Awesome Icons
i.fa
{
margin:4px;
}
Hope this helps.. :D