Social Menu – Mastodon Icon

Yes, there is: You can use this icon https://fontawesome.com/icons/mastodon?f=brands&s=solid. For doing this, add

.social-menu a[href*="mastodon.social"]::before { content: '\f4f6'; font-family: 'Font Awesome 5 Brands'; }

to stylesheet.css.

So there is no official list, but like this, you can use every fontawesome icon.

• This reply was modified 1 year, 7 months ago by luisluetkehellweg.

Cool! Thank you very much for your help and your super speedy reply.

— Edit —

Sorry, Just to make sure: The mastodon.social part of the link needs to be adjusted to the correct server, am I right?

• This reply was modified 1 year, 7 months ago by liviach.

I don’t know exactly, how the mastodon profiles work. href*="mastodon.social" assigns this icon to all social links, that contain “mastodon.social”, so if you have another URL for the server, you need to adjust it. If it contains “mastodon.social”, you can just add an individual link to your menu with your account and the icon will appear.

Thanks a lot! I tried myself meanwhile and it’s working perfectly.

I’m trying to add an icon for email (an envelope) and LinkedIn icon to the social menu and this didn’t work for me. In style.css it actually shows these icons (and many more) in the coding but they don’t show up as an option. How can I resolve this? Thanks.

I’m not 100% sure if I understood you, but I’d say for Linkedin, you just have to add the code like this to your custom styles in the theme editor.

.social-menu a[href*="https://www.linkedin.com/in/"]::before { content: '\f08c'; font-family: 'Font Awesome 5 Brands'; }

Have you tried that?
But you also have to add the link as a custom link to your menu in the editor.

When you have added the css part, navigate to menus.

Go to the social menu, and add a custom link with your Linkedin profile URL as link and Linkedin as Navigation label. Then save/publish.

Does that work?

I haven’t found the email letter icon yet, but it should work with the same steps, just updated the links and icon

Meanwhile I found an envelope, too. The css code should be like this:

.social-menu a[href*="mailto"]::before { content: '\f0e0'; font-family: 'Font Awesome 5 Brands'; }

Strangely, when I add the custom link (mailto:YourEmail) to my menu, the round button appears, but the envelope doesn’t. I haven’t figured out yet, why, because when I change the Unicode (f0e0) to any other icon, it works. But not with the envelope.

Thank you very much! I got them to work.

You’re most welcome. How did you do it with the envelope?

I tried many times, but I only get the round button, no image inside. Can you maybe share the code you used?

Thanks a lot in advance.

Here’s the kicker. If you delete the f0e0 but keep the “\” then it works. Unlike you, no Unicode worked for me when placing it in that particular code. I don’t know if this is a glitch within the theme I’m using or not. The envelope icon does show up on all web browsers and on desktop & mobile. So… who knows? It works for now.

Cool, I’ll try that immediately.
Thank you kindly for your swift reply!

EDIT: Yep, it works perfectly. Thanks a lot!

• This reply was modified 1 year, 3 months ago by liviach. Reason: Just found time to test and wanted to add the result in case others were interested

FYI the “f0e0” is working as it should now in the CSS.

Thanks a lot for the follow-up and information. ??
I’ll check it out as soon as I’ll have some time for it. ????