Add “Made with Love” with a Heart to Your Footer

Many sites display “Made with Love” or “Handcrafted with Love” in the site footer, and I wanted to do something similar.

Enqueue Ionicons

Open up your theme’s functions.php file and place the code below. Feel free to place this at the very bottom of the file, if you want.

// Enqueue Ionicons.
add_action( 'wp_enqueue_scripts', 'sp_enqueue_ionicons' );
function sp_enqueue_ionicons() {

wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );

}

To see a comprehensive list of their icon font library, click here.

Customizing Your Footer

The next step in the process is quite simple as well.

(Be sure that the Modify Entire Footer Text option is selected.)

Here you should place the following code.

<p class="love">Made with <i class="icon ion-heart"></i> By Franchbabu</p>

Obviously you can edit the HTML provided with your own name and links to other places. This is simply the code that I use on Authentik.

Styling the Heart Dashicon

Depending on what size and color of fonts you have declared in your style sheet, you might need to tweak the CSS a bit for your heart Ionicon.

Below is the CSS that I have used on my website to ensure the best look and placement of the heart Ionicon in my site footer.

/* Heart Icon
--------------------------------------------- */

.site-footer .icon {
	font-size: 20px;
}

.site-footer .love .icon {
	font-size: 12px;
	margin-left: 2px;
	margin-right: 2px;

And that is it—you’ve customized your site footer with a heart icon!