<p>".fa-beat" class:</p>
<p class="heart">
  <i class="fa fa-heart fa-4x fa-beat"></i>
</p>

<p>the name ".fa-pulse" was already taken by this:</p>
<p>
  <i class="fa fa-spinner fa-2x fa-pulse"></i>
</p>
<p>&hellip; obviously &hellip;</p>
<p>
  Read more on
  <a href="https://codeblock.at/en/2016/05/fontawesome-beating-heart-animation/" rel="noopener">codeblock.at</a>.
</p>
a{
  color:#09f;
}

/* FONT AWESOME GENERIC BEAT */ 
.fa-beat {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}






body {
  text-align:center;
  background:#111;
  color:#aaa;
  font:1em sans-serif;
}


.heart {
  color:red;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.