Promenade ships with an icon font called Genericons for displaying icons in the social menu. Icon fonts provide a number of benefits over images for icons — they’re better for performance, the color can be changed with CSS, and they eliminate blurriness on HiDPI screens — however, it’s not possible to bundle every useful icon without creating issues.

Fortunately, adding support for additional icons can be done with a bit of CSS.

Adding Custom CSS

For making minor CSS customizations, we recommend using a child theme or a plugin that allows you to easily add your snippets in the WordPress admin panel. If you’re already using Jetpack, it ships with a Custom CSS module, otherwise, Custom CSS by Dev7studios is a good standalone option.

Adding a SoundCloud Icon

The following CSS snippet shows how to add an icon for SoundCloud that matches the style of the icons in Promenade:

/* Set up SoundCloud in the Social Menu to show icons. */
.menu-social-container a[href*="soundcloud.com"]:before {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	content: "";
	height: 1.77778em;
	width: 1.77778em;
}

/* Make the icon lighter on hover to match existing icons. */
.menu-social-container a[href*="soundcloud.com"]:hover:before {
	opacity: 0.33;
}

/* Embed an icon image for SoundCloud. We're using SVG for HiDPI compatibility. */
.menu-social-container a[href*="soundcloud.com"]:before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTxwYXRoIGQ9Ik0xNy40MjEgMTAuMDQzYy0wLjM1MyAwLTAuNjkgMC4wNjktMC45OTcgMC4xOTMtMC4yMDUtMi4yMzQtMi4xNTQtMy45ODYtNC41MzEtMy45ODYtMC41ODIgMC0xLjE0NiAwLjExLTEuNjQ3IDAuMjk2LTAuMTk1IDAuMDcyLTAuMjQ2IDAuMTQ3LTAuMjQ2IDAuMjkxdjcuODY2YzAgMC4xNTIgMC4xMjIgMC4yNzggMC4yNzYgMC4yOTMgMC4wMDcgMC4wMDEgNy4xIDAuMDA0IDcuMTQ2IDAuMDA0IDEuNDI0IDAgMi41NzgtMS4xMSAyLjU3OC0yLjQ3OHMtMS4xNTUtMi40NzktMi41NzktMi40Nzl6TTcuODEzIDE1aDAuNjI1bDAuMzEzLTQuMzc5LTAuMzEzLTQuMzcxaC0wLjYyNWwtMC4zMTMgNC4zNzF6TTUuOTM4IDE1aC0wLjYyNWwtMC4zMTMtMy4xNzkgMC4zMTMtMy4wNzFoMC42MjVsMC4zMTMgMy4xMjV6TTIuODEzIDE1aDAuNjI1bDAuMzEzLTIuNS0wLjMxMy0yLjVoLTAuNjI1bC0wLjMxMyAyLjV6TTAuMzEzIDEzLjc1aDAuNjI1bDAuMzEzLTEuMjUtMC4zMTMtMS4yNWgtMC42MjVsLTAuMzEzIDEuMjV6IiBmaWxsPSIjMDAwMDAwIiAvPgo8L3N2Zz4=");
}

The last rule in that snippet embeds the image inline to help improve performance, but any value accepted by the background-image property is acceptable.

More Icons

Here are some more icons for Bandcamp, Deezer, ReverbNation and SoundCloud. Just copy and paste the ones you need to make sure your site stays speedy!

.menu-social-container a[href*="bandcamp.com"]:before,
.menu-social-container a[href*="deezer.com"]:before,
.menu-social-container a[href*="reverbnation.com"]:before,
.menu-social-container a[href*="soundcloud.com"]:before {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	content: "";
	height: 1.77778em;
	width: 1.77778em;
}

.menu-social-container a[href*="bandcamp.com"]:hover:before,
.menu-social-container a[href*="deezer.com"]:hover:before,
.menu-social-container a[href*="reverbnation.com"]:hover:before,
.menu-social-container a[href*="soundcloud.com"]:hover:before {
	opacity: 0.33;
}

.menu-social-container a[href*="bandcamp.com"]:before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgo8cG9seWdvbiBwb2ludHM9IjEuMzgyLDc5LjQ1NyA3MS4zODcsNzkuNDU3IDk4LjYxOCwyMC41NDMgMjguNjEyLDIwLjU0MyIvPgo8L3N2Zz4=");
}

.menu-social-container a[href*="deezer.com"]:before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cmVjdCB4PSIxLjA3NiIgeT0iNzEuODk1IiB3aWR0aD0iMTcuODM4IiBoZWlnaHQ9IjUuNDA2Ii8+PHJlY3QgeD0iMS4wNzYiIHk9IjY0Ljg2NyIgd2lkdGg9IjE3LjgzOCIgaGVpZ2h0PSI1LjQwOCIvPjxyZWN0IHg9IjEuMDc2IiB5PSI1Ny44NCIgd2lkdGg9IjE3LjgzOCIgaGVpZ2h0PSI1LjQwOCIvPjxyZWN0IHg9IjEuMDc2IiB5PSI1MC44MTMiIHdpZHRoPSIxNy44MzgiIGhlaWdodD0iNS40MDUiLz48cmVjdCB4PSIxLjA3NiIgeT0iNDMuNzg1IiB3aWR0aD0iMTcuODM4IiBoZWlnaHQ9IjUuNDA0Ii8+PHJlY3QgeD0iMjEuMDc3IiB5PSI3MS44OTUiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNiIvPjxyZWN0IHg9IjIxLjA3NyIgeT0iNjQuODY3IiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDgiLz48cmVjdCB4PSIyMS4wNzciIHk9IjU3Ljg0IiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDgiLz48cmVjdCB4PSI0MS4wOCIgeT0iNzEuODk1IiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDYiLz48cmVjdCB4PSI0MS4wOCIgeT0iNjQuODY3IiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDgiLz48cmVjdCB4PSI0MS4wOCIgeT0iNTcuODQiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwOCIvPjxyZWN0IHg9IjQxLjA4IiB5PSI1MC44MTMiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNSIvPjxyZWN0IHg9IjQxLjA4IiB5PSI0My43ODUiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNCIvPjxyZWN0IHg9IjQxLjA4IiB5PSIzNi43NTYiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNiIvPjxyZWN0IHg9IjQxLjA4IiB5PSIyOS43MjkiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNyIvPjxyZWN0IHg9IjYxLjA4MSIgeT0iNzEuODk1IiB3aWR0aD0iMTcuODQxIiBoZWlnaHQ9IjUuNDA2Ii8+PHJlY3QgeD0iNjEuMDgxIiB5PSI2NC44NjciIHdpZHRoPSIxNy44NDEiIGhlaWdodD0iNS40MDgiLz48cmVjdCB4PSI2MS4wODEiIHk9IjU3Ljg0IiB3aWR0aD0iMTcuODQxIiBoZWlnaHQ9IjUuNDA4Ii8+PHJlY3QgeD0iNjEuMDgxIiB5PSI1MC44MTMiIHdpZHRoPSIxNy44NDEiIGhlaWdodD0iNS40MDUiLz48cmVjdCB4PSI2MS4wODEiIHk9IjQzLjc4NSIgd2lkdGg9IjE3Ljg0MSIgaGVpZ2h0PSI1LjQwNCIvPjxyZWN0IHg9IjgxLjA4NCIgeT0iNzEuODk1IiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDYiLz48cmVjdCB4PSI4MS4wODQiIHk9IjY0Ljg2NyIgd2lkdGg9IjE3Ljg0IiBoZWlnaHQ9IjUuNDA4Ii8+PHJlY3QgeD0iODEuMDg0IiB5PSI1Ny44MzgiIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNiIvPjxyZWN0IHg9IjgxLjA4NCIgeT0iNTAuODEyIiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDciLz48cmVjdCB4PSI4MS4wODQiIHk9IjQzLjc4MyIgd2lkdGg9IjE3Ljg0IiBoZWlnaHQ9IjUuNDA3Ii8+PHJlY3QgeD0iODEuMDg0IiB5PSIzNi43NTciIHdpZHRoPSIxNy44NCIgaGVpZ2h0PSI1LjQwNCIvPjxyZWN0IHg9IjgxLjA4NCIgeT0iMjkuNzI4IiB3aWR0aD0iMTcuODQiIGhlaWdodD0iNS40MDQiLz48cmVjdCB4PSI4MS4wODQiIHk9IjIyLjY5OSIgd2lkdGg9IjE3Ljg0IiBoZWlnaHQ9IjUuNDA2Ii8+PC9nPjwvc3ZnPg==");
}

.menu-social-container a[href*="reverbnation.com"]:before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwcHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS4yNTYgOTYuODkyYzEuMzY4LTQuMjMgMi42NjMtOC4yNTMgMy45NjgtMTIuMjcyIGMyLjQ1My03LjU1NCA0Ljg5NS0xNS4xMTIgNy4zODgtMjIuNjUyYzAuMjktMC44NzQgMC4wNTEtMS4yOC0wLjYzOS0xLjc3NmMtOS40MS02Ljc3NC0xOC43OTktMTMuNTc3LTI4LjE5My0yMC4zNzMgYy0wLjMwNi0wLjIyMS0wLjYxLTAuNDQ0LTAuODk1LTAuOTI5YzAuODUzIDAgMS43IDAgMi42IDBjMTEuMDYzIDAgMjIuMTI4LTAuMDE2IDMzLjIgMCBjMS4xMDMgMCAxLjU3Mi0wLjMxOCAxLjkxNi0xLjM5MWMzLjU3Ny0xMS4xNjUgNy4yMTUtMjIuMzEgMTAuODM5LTMzLjQ1OWMwLjA4Mi0wLjI1MiAwLjE5MS0wLjQ5NSAwLjM3Mi0wLjk1NyBjMC4xOTEgMC41IDAuMyAwLjggMC40IDEuMTM1YzMuNjc2IDExLjEgNy40IDIyLjIgMTEgMzMuMjg3YzAuMzQ4IDEuMSAwLjggMS40IDEuOSAxLjQgYzExLjUyMi0wLjAyOCAyMyAwIDM0LjYgMC4wMTRjMC4zNzQgMCAwLjcgMCAxLjQgMGMtMC41MjYgMC40MTctMC44MjggMC42NzQtMS4xNDcgMC45IGMtOS4zNTMgNi43ODgtMTguNjk1IDEzLjU5LTI4LjA3OSAyMC4zMzVjLTAuOTQzIDAuNjc4LTEuMTI3IDEuMjE3LTAuNzYyIDIuMzIyYzMuNjQ0IDExIDcuMiAyMi4xIDEwLjggMzMuMSBjMC4xMDMgMC4zIDAuMiAwLjYgMC40IDEuMjE0Yy0wLjU4MS0wLjQwNC0wLjk0OC0wLjY1MS0xLjMwNS0wLjkxYy05LjI4LTYuNzU2LTE4LjU3LTEzLjUwMy0yNy44MjctMjAuMjkgYy0wLjg3Mi0wLjYzOS0xLjQ0OC0wLjY5Mi0yLjM2LTAuMDI4Yy05LjUyOCA2LjkzNC0xOS4wOTYgMTMuODE3LTI4LjY1NCAyMC43MTNDMTkuOTMxIDk2LjUgMTkuNyA5Ni42IDE5LjMgOTYuODkyeiIvPgo8L3N2Zz4=");
}

.menu-social-container a[href*="soundcloud.com"]:before {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTxwYXRoIGQ9Ik0xNy40MjEgMTAuMDQzYy0wLjM1MyAwLTAuNjkgMC4wNjktMC45OTcgMC4xOTMtMC4yMDUtMi4yMzQtMi4xNTQtMy45ODYtNC41MzEtMy45ODYtMC41ODIgMC0xLjE0NiAwLjExLTEuNjQ3IDAuMjk2LTAuMTk1IDAuMDcyLTAuMjQ2IDAuMTQ3LTAuMjQ2IDAuMjkxdjcuODY2YzAgMC4xNTIgMC4xMjIgMC4yNzggMC4yNzYgMC4yOTMgMC4wMDcgMC4wMDEgNy4xIDAuMDA0IDcuMTQ2IDAuMDA0IDEuNDI0IDAgMi41NzgtMS4xMSAyLjU3OC0yLjQ3OHMtMS4xNTUtMi40NzktMi41NzktMi40Nzl6TTcuODEzIDE1aDAuNjI1bDAuMzEzLTQuMzc5LTAuMzEzLTQuMzcxaC0wLjYyNWwtMC4zMTMgNC4zNzF6TTUuOTM4IDE1aC0wLjYyNWwtMC4zMTMtMy4xNzkgMC4zMTMtMy4wNzFoMC42MjVsMC4zMTMgMy4xMjV6TTIuODEzIDE1aDAuNjI1bDAuMzEzLTIuNS0wLjMxMy0yLjVoLTAuNjI1bC0wLjMxMyAyLjV6TTAuMzEzIDEzLjc1aDAuNjI1bDAuMzEzLTEuMjUtMC4zMTMtMS4yNWgtMC42MjVsLTAuMzEzIDEuMjV6IiBmaWxsPSIjMDAwMDAwIiAvPgo8L3N2Zz4=");
}