Pulsating circle behind an icon

[toolman]

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:

Edit fiddle - JSFiddle - Code Playground

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?

Thanks!

[PaulOB]

Is this any good as a starting point?

[toolman]

Thank you very much

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
}

[PaulOB]

This is the basics for a circle.

@toolman

width: 200px;

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.

[toolman]

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

Thanks again!