How to Add Social Icons to a WordPress Menu with CSS and Flex

There are a few WordPress plugins available for doing this but I wanted to create a custom menu with custom icons for the custom theme I am building and also didn’t want to have one more plugin on the website.

First create and name your social menu as Follow Us and add each social name in lowercase (facebook for Facebook.com) to the hidden title attribute that you check off at the top of the page in Screen Options to show it on each link in the menu. This code needs to be added to your media queries too and adjusted there to fit your website on Mobile and Tablet views.

Make a subfolder in a new folder using /icons/social/ in the custom theme folder under the img folder if it exists. Create it if it doesn’t exist. Place your PNG icons there for each social network and name them as I have. I used the Iconfinder social pack mentioned in the code block to match the theme being built and I found the other network’s black and white icons from their media pages and those that had colored icons only, I modified. Make sure your icons do not have transparent space around them, only at the rounded corners. Whether they are round or square icons, they should be square at 64px or smaller on all sides.

If you build this line by line, the text links will show in the theme first then the icons will appear next to the text and finally the text links will be hidden. The rest is positioning them as needed.

Your results may vary depending on the theme you build. My work will help steer you in the right direction.

/* Custom Social Menu Icons - Follow Us Styles ------------------------- */
/* Icon pack: https://www.iconfinder.com/icons/764909/facebook_media_social_square_icon */

/* #menu-follow-us */
.menu-follow-us-container a[title=facebook], .menu-follow-us-container a[title=twitter], .menu-follow-us-container a[title=instagram], .menu-follow-us-container a[title=justia], .menu-follow-us-container a[title=avvo] { /* hide text and change layout and spacing of buttons by manipulating hidden text */
	visibility: hidden;
	padding: 1rem; /* 10px */ /* mobile view if important can be set to padding-right: 5rem; on Justia icon */
}
#menu-follow-us { /* float icons left to right */
	display: flex;
	justify-content: space-around;
	text-align: center;
}
#menu-follow-us li { /* zero out */
	margin: 0;
	padding: 0;
}
.menu-follow-us-container a[title=facebook]:before, .menu-follow-us-container a[title=twitter]:before, .menu-follow-us-container a[title=instagram]:before, .menu-follow-us-container a[title=justia]:before, .menu-follow-us-container a[title=avvo]:before { /* show icon before text */
	visibility: visible;
	overflow: hidden;
}
.menu-follow-us-container a[title=facebook]:before {
	content: url('img/icons/social/facebook-black-64.png');
}
.menu-follow-us-container a[title=twitter]:before {
	content: url('img/icons/social/twitter-black-64.png');
}
.menu-follow-us-container a[title=instagram]:before {
	content: url('img/icons/social/instagram-black-64.png');
}
.menu-follow-us-container a[title=justia]:before {
	content: url('img/icons/social/justia-black-64.png');
}
.menu-follow-us-container a[title=avvo]:before {
	content: url('img/icons/social/avvo-black-64.png');
}

Here’s how they looked like on Desktop.

Leave a Reply (choose a login you already have or create a free WordPress account)

%d bloggers like this: