If you scroll to the bottom of this page, you’ll see I built a custom footer that includes a row of social media icons. These links go out to my social media profiles, in the hopes people will follow me and help build my personal brand.
Our team at StudioPress has developed a plugin called Simple Social Icons and is being used on over 100,000 websites. I love the plugin, but the design of those icons didn’t quite go with what I currently have here.
Earlier this year I found Ionicons — a 100% free and open source set of icon fonts. They have a group of icons that are sleek and modern, and were a better fit for my design.
I thought it’d be fun to write a tutorial on how to display social media links with Ionicons, and you’ll see it’s quite easy to do. Just follow these steps.
Open up your theme’s functions.php file and place the following code:
Now you need to add some HTML to your website, which is typically best done with a text widget. On my website, I’m using a custom site footer widget area, and this is the HTML I’m using:
Obviously you will need to style your social media links, but the CSS you see below should give you a place to start. Here is what I used to style the Ionicons on my website:
If you’re looking to add Ionicons in another location, here’s a comprehensive list of Genesis Hooks for you to use as reference. I’m also pleased to share with you some Genesis code snippets that I use when I’m developing websites with the Genesis Framework. They are free to use, so go ahead and do whatever you want with them.