Pulsating circle behind an icon

Hi there,

I am trying to add a pulsating circle behind an icon, but not sure the best way to achieve this.

This is the fiddle I have with a heart icon:

and this is what I am trying to achieve:

I’ve tried adding the code from that pen, but its sticking an oval in the middle of the page.

Can anyone help me add a pulse behind the icon?


Is this any good as a starting point?

1 Like

Thank you very much :slight_smile:

I have tried to add a solid circle behind it, but it’s not appearing.

I’ve changed this part:

.share-the-luck span.fa-heart:after {
  border-radius: 50%;
	width: 200px;
	height: 200px; 
  position: absolute;
  left: 0;
  top: 0;
  animation: pulse 1s infinite;
  background: #fe0b5b

This is the basics for a circle.

Don’t use width but instead scale it with transform. keep the width and height to match the heart and then scale it with the transform.

1 Like

Thank you. I decided to go with your first version with the heart as it looked much nicer :slight_smile:

Thanks again!

1 Like