How to Add Custom Social Media Icons

Applies to: Theme Blvd Framework 2.5+

In this tutorial, let’s quickly cover how to add custom icons to the social icons setup from your theme options.

For our simple method to work, you must be using an icon style that displays FontAwesome icons; these are all the “Flat” styles. The “Color” style uses images, and would require custom images and CSS, that I won’t be covering here.

Note: We’ve tried to move away from using the old-fashioned looking image icons recently. So you’ll notice in more recent themes, and the latest bases of Jump Start, the icon style options have been removed, and you’re forced to use the flat styles, anyway.

Also, for this to work, you need to make sure and pick an available icon in the FontAwesome library to associate with the icon you add.

https://fontawesome.com/icons/

From your child theme’s functions.php, here’s how you’d add the icons.

/**
 * Add social media buttons to theme options.
 *
 * Requirements:
 * 1. Your icon style must be one of the "Flat" selections,
 * so it uses FontAwesome.
 * 2. The key of your array value must match a FontAwesome
 * icon ID. For example, "yelp" would work because "fa-yelp"
 * exists at: http://fontawesome.io/icons/
 */
function my_social_media_sources( $sources ) {

    $sources['yelp'] = 'Yelp';
    $sources['twitch'] = 'Twitch';
    
    // etc ...

    return $sources;
}
add_filter('themeblvd_social_media_sources', 'my_social_media_sources');

And now, from your Theme Options page, you’ll see those new sources available for selection. And on the frontend of the website the corresponding FontAwesome icons will be automatically matched up.