Add a tiktok social media icon to the Beaver Builder Theme

To do this, edit the functions.php file in your theme and paste in the below php code:

// register the new setting for the new social media icon

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

Now, when you go to your WordPress Dashboard > Appearance > Customize > Settings > Social Links there will be a new field to add your URL for this new social media channel, as per below, where you can now see a field for Tiktok in our example.

Next, paste the first php code snippet below into your themes functions.php file

// add our new social media icon into the list of icons output by the Beaver Builder Theme

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

You’ll notice in the PHP below that we’re using the filter fl_social_icons that’s included in the Beaver Builder Theme to allow us to do exactly what we’re trying to achieve in this tutorial (the official documentation on this filter is here).

Next, add the above CSS code into your theme’s style.css file (or wherever else you add your CSS code):

/* Add the below CSS to ouput the Tiktokicon
- Replace the word Tiktok with your email social media icon
- replace the unicode e07b with the unicode for your social media icon from Font Awesome */
.fl-social-icons .fl-icon-tiktok{font-family: FontAwesome; font-size: 17px;}
.fl-icon-tiktok-circle:before { content: '\e07b'; }
.fl-icon-tiktok-regular:before { content: '\e07b'; }
.fl-icon-tiktok.fl-icon-color-branded { color: #ff0050; }
.fl-icon-tiktok.fl-icon-color-branded:hover { color: #000000; }

you can find all Font Awesome icons by clicking here.