How can I manually add Mastodon to my social links?

How can I manually add Mastodon to my social links?

detritusbooks
Tourist
16 0 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

Replies 4 (4)

detritusbooks
Tourist
16 0 1

Nobody knows?

detritusbooks
Tourist
16 0 1

I'm kind of surprised that nobody knows how to do this...

CharlesA-M
Visitor
1 0 0

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 </head> 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):

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

or

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

 

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.

potterybyosa
Visitor
1 0 0

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