Social Media Links in Header Box

Go to Appearance > Menu and create a menu with links pointing to your social media sites. Then assign the menu you created to the “Social Links Menu” location. After you assign the menu, the icons should appear automatically after that.

The instructions are also posted at https://theme.wordpress.com/themes/fictive/ under “Social Links” in case you need them.

Hi there,

I have another related question, which maybe I should post independently, but I’ll try here first. It has to do with getting the email icon in the social media links menu.

I have tried adding some social links, which seem to recognize themselves and use the appropriate icon, but I’m not getting an email icon when I add my email. I get something else, which does not scream “email!” to me. The link functions properly, but the icon does not give an indication of what its function is.

I have seen a lovely little letter (for mailing) icon out there before – can we get it?

Thanks!
m.

I’m not getting an email icon when I add my email.

meganva – email isn’t one of the services that has a built-in style in the theme’s CSS. You can see which are included starting on line 2542 in style.css.

If you add this bit of CSS to your Custom CSS or child theme, you’ll get an email icon in your Social Links menu, as long as you enter your address in the clickable format “mailto:[email protected]”

.social-links ul a[href*="mailto"]:before {
	content: "\f410";
}

Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Thanks!

I am having the same problem with the email button. I installed the Jetpack plugin and added the following Css on the stylesheet but it still doesn’t show up. What am i doing wrong?

.social-links ul a[href*="[email protected]"]:before {
	content: "\f410";
}

[email redacted]

Hi Life Well Blended – you shouldn’t be putting any email addresses in your CSS, that won’t work. ??

Try what I provided earlier, without the address itself:

.social-links ul a[href*="mailto"]:before {
	content: "\f410";
}

That will give you a little envelope icon:

Enter your email address – with the mailto: in front of it, to make it clickable – in the social links menu under Appearance > Menus, like this:

If you aren’t sure how to create a social links menu, here’s a guide intended for WordPress.com, but the instructions are generally the same here:

https://en.support.wordpress.com/menus/social-links-menu/