Font-awesome: Icon Request: fa-mastodon

[xuv]

Since the Mastodon Fediverse is gaining traction at the moment, there will soon be a need to update all the social profiles with a new icon.

The Mastodon logo

[chrisheninger]

Digging around for an SVG so I can add Mastodon to my Franz app (meetfranz!), this is the best I could find from a few minutes of searching: http://svgur.com/s/Jh

[chrisheninger]

GitHub won't let me upload an SVG, so here's the code for a cleaned up version of the above URL to match the PNG. (blue solid logo rather than black outlines)

---removed SVG tag in favor of official logos below 👇 ---

[xuv]

Thanks @chrisheninger. Looks like a redraw by someone but thanks :)

[micahilbery]

there is an svg version of the logo on the mastodon github here: https://github.com/tootsuite/mastodon/blob/master/app/assets/images/logo.svg

[xuv]

@TraumaD Yes. Hopefully updated soon with the most recent colors and shapes. https://github.com/tootsuite/mastodon/pull/1362

[ghost]

+1

[dersch81]

+1

[micahilbery]

The svg (and png) of the logo on the projects official GitHub was recently updated to be better pixel fitted, optimized, and to make the two the same size shape and colour. Links to the new icon are here:

SVG: https://github.com/tootsuite/mastodon/blob/master/app/javascript/images/logo.svg
PNG: https://github.com/tootsuite/mastodon/blob/master/app/javascript/images/logo.png

[stephenstewart-ca]

I ran your svg through affinity and donatello and hand edited the html and css:
mastodon-icon-font.zip

[ROYALBEFF]

+1

[Gargron]

Hello! Finally we have a new logo for Mastodon. I was hesitating to respond in this thread because I knew a new one was coming (I didn't like the old one), I just didn't know when. Now it's here. The SVG can be found here: https://github.com/tootsuite/mastodon/blob/master/app/javascript/images/logo.svg

[stephenstewart-ca]

I scaled your Simplify & Favicon SVG files to a nominal 1000 x 1000 px in Affinity Designer.
The EOT, SVG, TTF, & WOFF fonts were generated by Fontello; the OTF font by Font2Web.
The #3088d4 hex color value is embedded with a style tag in the html.
new-mastodon-icon-font.zip

[Gargron]

@stephenstewart-ca Fantastic, thank you!

Now how/when can this land in font-awesome?

[stephenstewart-ca]

There two ways: a short term fix and a long term solution.
The short term solution is to add fa-mastodon (\e8a1) and fa-mastodon-alt (\e8a2)
to a custom font-awesome with all the other icons (see: custom-font-awesome.zip).
custom-font-awesome.zip
In the long term, submit mastodon.svg and mastodon-alt.svg (see: mastodon-svg4font.zip)
to the Font Awesome community (https://github.com/FortAwesome/Font-Awesome/issues).
See guidelines (https://github.com/FortAwesome/Font-Awesome/blob/master/CONTRIBUTING.md).
mastodon-svg4font.zip
The author of Font Awesome is: [email protected] or https://twitter.com/fontawesome/

[Gargron]

From reading the contribution document, seems like this issue already fulfills all points from "Requesting new icons" - so a matter of waiting now?

[stephenstewart-ca]

Hi @tagliala
This file mastodon-svg4font.zip contains mastodon.svg and mastodon-alt.svg for use by the
mastodon project, GNU Social-compatible microblogging server hosted here on GiHub:
https://github.com/tootsuite/mastodon
Can you help us add these to icons to Font Awesome?
mastodon-svg4font.zip

[iamcryptoki]

+1 Definitely needed!

[DeadSuperHero]

Any word on this? Would love to see support for the network in this icon set.

[cerisara]

Please add the Mastodon icon to font-awsome !

[jaketothepast]

+1 would like this icon pls

[ghost]

+1

[Sciss]

Hey; what's the status? It would be great if this was added!

[thomasbnt]

Yeah, please +1 .

[Drulac]

Please add it :-) !

[remram44]

You can use the SVG above in the interim; that's what I did. I agree that this is a useful icon, and since we have the glyph I'm not sure what's the holdup (or timetable).

[kindlyfire]

+1 👍

[kasramp]

+1

[jelv]

138 thumbs up emoji. Please add it :) Hope this request gets picket up before it's 1 year anniversary coming april.

[byronalley]

+1 👍

[Clarkinia]

+1

[Gargron]

This is the second most upvoted issue on this repository. What is holding it back for over 10 months?

[xuv]

@Gargron I've started tackling this issue. But it would be my first PR to this project. I think the main problem is that there hasn't been a PR from a community member in years (for adding icons that is, there has been PR for other issues). The code base is quite complicated to understand. There is multiple versions of the font in it and I'm still not sure if I added the icons to the right font file. Also, I still haven't figured out the full tool stack to get everything set up. Hoping to make more progress soon.

[Yeru-314]

+1

[xuv]

@Gargron As expected, the PR #12238 has been closed and not merged. The reason is they don't accept PR with icons at the moment. The last icon commit was Oct 22, 2016.

If people want to grab a FontAwesome clone with the Mastodon icons in it, they are welcome to snag it from this fork.

[tyrosinase]

I'm not above abusing other people's trademarks (ostensibly as temporary placeholders): is it possible to convince FA to display RTL so I could mirror the DeskPro icon as a workaround?

[trwnh]

@tyrosinase you can already mirror icons. either apply data-fa-transform="flip-h" in FA5, or use CSS3 transforms like transform: scaleX(-1). Or you can use xuv's fork of FA4 in the comment immediately above yours.

[Sciss]

You can use https://github.com/ForkAwesome/Fork-Awesome/ - it includes Mastodon, Diaspora etc.

[kaushalmodi]

Thank you @stephenstewart-ca! Using your svg icons, I devised a hack to use those (for the lack of Fontawesome support) for Mastodon icon on my Hugo site (site footer).

[stephenstewart-ca]

An SVG for fonts, including icon fonts, must be a monochrome single layer, by default black, so the new multicolour multilayer SVG submitted to Font-Awesome by Mastodon doesn’t work.

A better choice may be the Material Design Icons font maintained by Austin Andrews which includes all of Google’s Material icons as well as a large number of icons submitted by other contributors:
https://materialdesignicons.com/

The easiest way to use the Material Design Icons font is from a CDN:
https://cdnjs.com/libraries/MaterialDesign-Webfont

The Material Design Icons font is on GitHub:
https://github.com/Templarian/MaterialDesign

[cerisara]

@kaushalmodi @stephenstewart-ca Thank you for your help.

However, from a user point of view, the OP was about font-awsome because it's easy-to-use in current web site compilers (e.g., pelican). But there is no need to really stick to font-awsome: what is really important, is to give site creators (who may not know what a CDN is, like me :-) ) an easy "tutorial" about how to integrate the Mastodon icon in Jekyll, Hugo, pelican...

[sensibleworld]

https://fontawesome.com/icons/mastodon

[realityfabric]

When I download the SVG it appears to be entirely transparent, and when I link to the icon with

<i class="fab fa-mastodon"></i>

the icon does not show up.

[remram44]

The SVG from the above page is NOT entirely transparent. If you want to use the SVG directly, then you should use an <img> tag.

[realityfabric]

Ah, you're right. My image viewer showed nothing when I opened the file, but opening the file with Firefox does show it. Not sure why Ubuntu would just... not show it.

[realityfabric]

It still doesn't show up when you use that HTML code, though, which was the reason I downloaded the SVG in the first place.

[robmadole]

@realityfabric can you open a new issue if you are having trouble?