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

**URL:** <https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571>\
**Category:** BB Theme\
**Created:** [January 19, 2016, 10:03am UTC](https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571 "2016-01-19T10:03:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nomad411](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/nomad411/32/2195_2.png) [@nomad411](https://community.wpbeaverbuilder.com/u/nomad411)\
**Post date:** [January 19, 2016, 10:03am UTC](https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571/1 "2016-01-19T10:03:12Z")

</div>

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/](http://forum.wpbeaverbuilder.com/knowledge-base/theme-filter-reference/)

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\
**Post date:** [January 19, 2016, 2:33pm UTC](https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571/2 "2016-01-19T14:33:04Z")

</div>

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)…

```auto
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…

```auto
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

---

<div class="post-metadata">

**Author:** ![jeannot-mullerramgad](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/jeannot-mullerramgad/32/552_2.png) [@jeannot-mullerramgad](https://community.wpbeaverbuilder.com/u/jeannot-mullerramgad)\
**Post date:** [March 19, 2016, 1:48am UTC](https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571/3 "2016-03-19T01:48:56Z")

</div>

Thank you Justin. This just works perfectly fine. I used it for including [xing.com](http://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](http://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;  
}

---

<div class="post-metadata">

**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\
**Post date:** [March 21, 2016, 11:16am UTC](https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571/4 "2016-03-21T11:16:05Z")

</div>

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

Justin

---

<div class="post-metadata">

**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\
**Post date:** [April 27, 2019, 10:21pm UTC](https://community.wpbeaverbuilder.com/t/adding-a-new-icon-to-the-social-icons-following-the-kb-article/6571/5 "2019-04-27T22:21:27Z")

</div>