Mastodon Icons!

Please Note: This post is a year or more old. Consequently, content may have changed, gone out of date, broke, opinions have changed or is now just plain wrong. If you have any questions, concerns or issues with this content, please feel free to send me an email, including the link, and what issue you're experiencing.

Thank you.

-- Nathan

It took some doing, but I finally have a Mastodon icon for my social media menu. It may not seem like it’s important, but I’m really nit-picky about this crap.

A picture of the social media icons on my site (menu and footer).
Yay!

Turns out it took a bit of doing. I installed Add Fediverse Icons to Jetpack, then (thanks to the developer of that plugin) I added this snippet he wrote for me:

add_filter( 'walker_nav_menu_start_el', 'my_apply_icon', 100, 4 );
function my_apply_icon( $item_output, $item, $depth, $args ) {
	$social_icons = array(
		'Diaspora'   => 'diaspora',
		'Friendica'  => 'friendica',
		'GNU Social' => 'gnu-social',
		'Mastodon'   => 'mastodon',
		'PeerTube'   => 'peertube',
		'Pixelfed'   => 'pixelfed',
	);

	if ( 'social' === $args->theme_location ) {
		foreach ( $social_icons as $attr => $value ) {
			if ( false !== stripos( $item_output, $attr ) ) {
                                $item_output = preg_replace( '@<svg(.*?)</svg>@', '', $item_output );
				$item_output = str_ireplace(
					$args->link_after,
					'</span>' . jetpack_social_menu_get_svg( array( 'icon' => esc_attr( $value ) ) ),
					$item_output
				);
			}
		}
	}

	return $item_output;
}

This added the icon to successfully to my menu. However, it was giant. I noticed in the web inspector in Firefox, that the bounding box for the SVG was huge. I changed it to be 24 pixels tall like so:

.icon.icon-mastodon {
  height: 24px;
}

Finally, things are good!

Edit: I keep all my CSS edits in Git.