How can I manually add Mastodon to my social links?

Store Design
,
1

I just wanna add Mastodon to my social links, but the theme doesn’t have Mastodon as an option. Is there a way to just manually do this in the code?

Screen Shot 2022-12-18 at 11.48.02 AM.png
Screen Shot 2022-12-18 at 11.48.02 AM.png1110×1234 80.4 KB

2

Nobody knows?

3

I’m kind of surprised that nobody knows how to do this…

4

I figured out how to add a Mastodon icon to my social icons using FontAwesome:

First, add this line to your theme.js file, just before the tag:

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css' | stylesheet_tag }}

Then add one of these to the place in your code where you want it to appear (e.g. social-icons.liquid or footer.liquid):

or

Additionally, because I wasn’t using the render tag on the svg liquid files, I had to do some tweaking of the size and other CSS attributes, namely adding text-decoration:none and height: 44px to the a tag.

Source help docs used to solve this:
StackOverflow thread

More about formatting fontawesome fonts.

5

Would also love to know. I’m nervous about altering my Theme code and hope this becomes an option in future Shopify updates.