Adding a new icon to the Social Icons? (Following the KB article)

BB Theme
1

Hi,

What’s the way to add a custom icon to the list of Social Icons?

It’s mentioned that we can add new ones using the filter ‘fl_social_icons’ at http://forum.wpbeaverbuilder.com/knowledge-base/theme-filter-reference/

Thanks :slight_smile:

2

Hey Gerard!

That’s possible, but you’ll need to add a new Customizer control in functions.php to make it work. First add the control (changing nomad to whatever you like, that is used to build the CSS class that would become fl-icon-nomad)…

function nomad_customize_register( $customizer )
{
	$customizer->add_setting( 'fl-social-nomad', array( 
		'default' => '' 
	) );
	
	$customizer->add_control(
		new WP_Customize_Control( $customizer, 'fl-social-nomad', array(
			'label' 	=> 'Nomad',
			'section' 	=> 'fl-social-links'
		) )
	);
}
add_action( 'customize_register', 'nomad_customize_register' );

Then add it to the icon list using the filter…

function nomad_social_icons( $icons ) {
    $icons = array(
	    'nomad',
        'facebook',
        'twitter',
        'google',
        'linkedin',
        'yelp',
        'pinterest',
        'tumblr',
        'vimeo',
        'youtube',
        'flickr',
        'instagram',
        'dribbble',
        '500px',
        'blogger',
        'github',
        'rss',
        'email'
    );
    return $icons;
}
add_filter( 'fl_social_icons', 'nomad_social_icons' );

Once you’re done it will show up in the Customizer and on the frontend with the classes below, but you’ll need to style it using your own CSS. Let me know if you have any questions about that.

fl-icon fl-icon-color-mono fl-icon-nomad fl-icon-nomad-regular

Justin

3

Thank you Justin. This just works perfectly fine. I used it for including xing.com (which is a quite popular linkedin alternative in Europe). So I basically only replaced nomad by xing and added the below custom CSS. You might want to consider if including xing.com as the standard is an option, because it’s a popular service (which I don’t like though, but you need to use them in good old Europe).

.fl-icon-xing-circle:before {
content: ‘\e295’;
}

.fl-icon-xing-regular:before {
content: ‘\e095’;
}

.fl-icon-yelp.fl-icon-color-branded {
color: #c31200;
}

4

Thanks, Jeannot! We’ll have a look at getting that added.

Justin