Categories
Computers

Mastodon Icons!

In which I fix the broken Mastodon icon link in my social media menu.

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.

By Nathan

Hello! My name is Nathan and I'm a technologist living and working in the south east. I love breaking crap and fixing it. I tend to break more than I fix. When I'm not breaking and fixing stuff, I'm playing games with my son or going to Disney with my family. I strongly support open source software, hardware and greater transparency in government.