You are currently viewing Add Social Icon to OceanWP

Add Social Icon to OceanWP

Recently I migrated my WordPress-based site to the free version of the great OceanWP theme.
While many social icons are already supported, Mastodon is currently not supported.

So I filed a feature request here:

The friendly guys from OceanWP the explained, how I could add a Mastodon link with icon today.
After fiddling around a bit, their solution worked well for me:

  • Save your OceanWP customizer settings
  • Create an OceanWP child theme (you can use the Ocean Extra plugin for that task)
  • Import your saved customizer settings => Now your website should look the same as before
  • Activate child theme
  • The theme icons to “Font Awesome”
  • Open the Appearence/Theme File Editor
  • Add the following code to functions.php and save
function my_ocean_social_options( $array ) {
	// Mastodon icon
	$array['mastodon'] = array(
		'label' => 'Mastodon',
		'icon_class' => oceanwp_icon( 'mastodon', false)

	return $array;

add_filter( 'ocean_social_options', 'my_ocean_social_options' );

function add_new_icons( $icons ) {
	$icons['mastodon']= array(
                'sili' => 'fab fa-mastodon',
                'fai'  => 'fab fa-mastodon',
                'svg'  => 'fab fa-mastodon',

	return $icons;
add_filter( 'oceanwp_theme_icons', 'add_new_icons' );

Now, whenever you want to add a social link, you will find “Mastodon” at the end and you can add your Mastodon link.
Mine is and you can see a live version of this at

This Post Has One Comment

  1. Susan


Leave a Reply

I accept the Privacy Policy