Many sites display “Made with Love” or “Handcrafted with Love” in the site footer, and I wanted to do something similar.
If you take a look at the bottom of the page in my footer at Authentik, you’ll notice that it does not display the default text that is output by the Genesis Framework. Here’s what that looks like:
In just a few steps, this is super easy to do:
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.
This will properly enqueue Ionicon styles and allow you to add any of the icons they offer to your website. 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. Download and install the Genesis Simple Edits plugin on your website.
For those of you who are unfamiliar, this plugin allows you edit the three most commonly modified areas in any Genesis theme: the entry meta in the entry header, the entry meta in the entry footer and the site footer.
After you’ve activated the plugin, go to the Genesis > Simple Edits screen and look for the Footer Output option box at the bottom of the screen.
(Be sure that the Modify Entire Footer Text option is selected.)
Here you should place the following code:
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.
And that is it—you’ve customized your site footer with a heart Ionicon!
We have published additional Genesis Quick Tips for you, so feel free to use what you see to build something awesome.