How To Add FontAwesome Icons To Simple Social Icons

Ever have clients ask you to add abnormal social networks to their site? Ever have clients not like the Facebook icon you used? I have, and this can be frustrating when you already have your social icons setup using Simple Social Icons. Simple Social Icons is — you guessed it — an intuitive plugin that adds social icons to your website through widgets. The only downside to the plugin is that you’re limited to its initial options. At the time of writing you have 22 social icons to choose from.

We Now Have The Power To Choose From 671 Icons

Step 1: Install FontAwesome

(Skip to step 2 if it’s already installed)

You can either add the following code to your theme’s functions.php – where you enqueue your styles:

wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );

This code grabs the latest version of FontAwesome so you never have to worry about updating.

Or you can install via the plugin Better Font Awesome, I prefer the first method.

Step 2: Add The Icons To The Simple Social Icons Plugin

Now that you have Font Awesome installed, place the following code in your functions.php. This specific code adds an alternate YouTube icon (because the client didn’t like the first one). It also adds a Houzz icon (which is often difficult to find plugins for).

add_filter( 'simple_social_default_profiles', 'custom_add_new_simple_icon' );

function custom_add_new_simple_icon( $icons ) {
	$icons['my-new-icon'] = [
		'label'   => __( 'Youtube Alt', 'simple-social-icons' ),
		'pattern' => '
',
	];
        $icons['my-new-icon-2'] = [
		'label'   => __( 'Houzz', 'simple-social-icons' ),
		'pattern' => '
',
	];

	return $icons;
}

add_filter( 'simple_social_default_styles', 'custom_add_new_icon_default' );

function custom_add_new_icon_default( $defaults ) {
	$defaults['my-new-icon'] = '';
        $defaults['my-new-icon-2'] = '';

	return $defaults;
}

Make Sure To Update The Following

• The labels: YouTube Alt and Houzz
• The CSS classes on the li elements: youtube-alt and houzz
• The icons themselves: <i class=”fa fa-youtube” aria-hidden=”true”></i> and <i class=”fa fa-houzz” aria-hidden=”true”></i>

Now when you go to back to the widgets section you will see the new icons appear among the list of others!

Credits

Many thanks to the original post on how to add icons.
Nick Cernis – Add an additional icon in version 2.0