Home
Blogging

Add Pulse effect on Font Awesome Heart Icon with CSS3 Animation?

How you can create a heartbeat pulse effect with CSS3 on Font Awesome icon. As the Heart is built we can add the CSS animation to create the pulse effect and add it in our Blogger template footer credit section.
Add Pulse effect on Font Awesome Heart Icon with CSS3 Animation?

A website’s footer credit section contains information about copyright, Designer’s website URL, information about different informative page links etc. But most of us ignore this section, because we think that this part is useless. But to give a professional look to your site you must craft your site top to bottom professionally. Many web designer design site’s footer credit section different way. Some are gives emphasize on design and some are leave it with simple or without design. We see many popular website those who are using a text in footer section that said –
  • Crafted With Love + A Heart image
This is a message towards site visitors, nothing else. Some of them are showing heat with pulse effect. This is really cool staff and makes our web site’s footer section eye-catching. In this tutorial I will show you the way that how easily we can add this effect on a heart icon and add it in our Blogger template footer section. So hang tight and go ahead with me.

First we need to create a heart icon. Now using image is pointless because it can affect loading time. Instead of image we will use Font Awesome icon for heart creating heart shape. So let’s proceed to the step guide below.

If your template already containing Font Awesome file then please just skip this step. But if you want to add latest Font Awesome version then you can go through this steps.

Step #1: Go to “https://www.blogger.com” and Sign in to your account

Step #2: From “Blogger Dashboard” click on ->Template ->Edit HTML 

Step #3: And locate the <head> section in your Blogger template

Step #4: Finally copy following line of markup and paste it below <head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Step #5: Now scroll down and locate you blogger footer text where maybe written “All rights reserved 2016” or something else. And add below code for after text. You can change the “#FF0000” code for altering the heart color.
<i class='fa fa-heart fa-lg' style='color:#FF0000'/></i>

Step #6: After that hit the “Save template” button.

The above steps will help you to add latest Font Awesome core file into your Blog, and a heart icon into your site’s footer section. You can check your website now to see the heart icon.

crafted with love

How to add pulse effect on Heart Icon with CSS3 Animation?

Now we need to do small code for adding pulse effect on the heart icon that we have displayed by using Font Awesome icon code. Please go through the below steps guide-

Step #1: Go to “https://www.blogger.com” and Sign in to your account

Step #2: From “Blogger Dashboard” click on ->Template ->Edit HTML 

Step #3: Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

<i class='fa fa-heart fa-lg' style='color:#FF0000'/> </i>

 Step #4: Paste the below code Before/above ]]></b:skin>

.pulse{-webkit-animation:pulse .8s linear infinite;-moz-animation:pulse .8s linear infinite;-ms-animation:pulse .8s linear infinite;animation:pulse .8s linear infinite}@keyframes &quot;pulse&quot;{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(0.8);transform:scale(0.8)}100%{-moz-transform:scale(1);transform:scale(1)}}@-webkit-keyframes &quot;pulse&quot;{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-ms-keyframes &quot;pulse&quot;{0%{-ms-transform:scale(1);transform:scale(1)}50%{-ms-transform:scale(0.8);transform:scale(0.8)}100%{-ms-transform:scale(1);transform:scale(1)}}

Step #5: Now locate the pulse icon code from your Blogger footer section

Step #6: And replace the above code by below code. In below code I just added “pulse” text to integrate the CSS effect with heart icon.
<i class='pulse fa fa-heart fa-lg' style='color:#FF0000'/></i>

#Alternatively you can add some text if you wish to add with it like below. Please replace Blogger Spice with your Blog name.
All Rights Reserved © 2016. Crafted With Love <i class="pulse fa fa-heart fa-lg" style="color: #FF0000;"> </i> By <a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null"> <span itemprop="name">Blogger Spice</span></a>

Step #7: And click "Save template” button from the top.

All done! Now visit your Blog or website and see footer section. I am sure that your heart icon has got pulse effect. This is looking just like heart beat. Your site visitors obviously love to see this effect on footer credit section.

blogger widget with CSS3 animation
Add Pulse effect on Font Awesome Heart Icon with CSS3 Animation?

What steps you have taken to make your website footer credit section attractive?

1 comment

  1. Having read this I believed it was very enlightening.
    I appreciate you spending some time and energy to put this
    content together. I once again find myself
    spending a significant amount of time both reading and commenting.

    But so what, it was still worthwhile!
Go Up