How to add new social icons

How to Add a Custom Social Icon in WP Team Manager (Using Font Awesome 5)

Since WP Team Manager outputs social links in the format:

<a class="facebook-0" href="https://test.com" target="_blank" title="Facebook">
    <i class="fab fa-facebook-f"></i>
</a>

We need to ensure that our custom social icon follows the same structure when added.

Step 1: Add a New Social Icon via wp_team_manager_social_options

In your theme’s functions.php file or a custom plugin, use the following code to add a new custom social option:

add_filter( 'wp_team_manager_social_options', function( $options ) {
    $options['custom-social'] = __( 'Custom Social', 'wp-team-manager' );
    return $options;
});

This adds a new social media option named custom-social to WP Team Manager.

Step 2: Ensure Correct Font Awesome Icon is Applied

Now, when WP Team Manager generates social links, it will create an anchor (<a>) with a class name based on the key we defined (custom-social-0, custom-social-1, etc.).

By default, WP Team Manager might not add the Font Awesome class (fab fa-*) automatically. To fix this, we need to use CSS to apply the correct Font Awesome 5 icon.

Step 3: Style the New Social Icon with Font Awesome

Add the following CSS to your theme’s stylesheet (style.css) to ensure the correct Font Awesome icon appears:

/* Target the dynamically generated class */
a[class^="custom-social"] i {
    font-family: "Font Awesome 5 Brands"; /* Ensure the correct Font Awesome font is used */
}

/* Example: Applying a Font Awesome icon */
a[class^="custom-social"] i::before {
    content: "\f099"; /* Unicode for Font Awesome Twitter icon - Replace with your desired icon */
}

Finding the Right Unicode for Font Awesome 5

To use a different icon, find the Unicode value from the Font Awesome 5 Icons page.

Example Unicode values:

• Facebook → \f09a

• Twitter → \f099

• LinkedIn → \f0e1

Step 4: Ensure Font Awesome is Loaded (if not already)

If Font Awesome 5 is not already enqueued in your theme/plugin, add this to your functions.php file:

function load_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'load_font_awesome');

Final Result

Once everything is in place, WP Team Manager will generate a social icon like this:

<a class="custom-social-0" href="https://yourcustomlink.com" target="_blank" title="Custom Social">
    <i class="fab fa-custom-icon"></i>
</a>

Customize the icon by modifying the Font Awesome class in CSS.

Ensure WP Team Manager recognizes the new option by using wp_team_manager_social_options.

Check that Font Awesome 5 is properly loaded to display icons correctly.

With this approach, you can dynamically add any social media icon without modifying WP Team Manager’s core files.