1. Documentation /
  2. Create a social icon menu

Create a social icon menu

Storefront’s secondary navigation menu location is ideally positioned to display links to your social media profiles with instantly recognizable icons. This modification automatically replaces links to popular social networks with icon equivalents.

Note: This is a Developer level doc. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our Support Policy.

We recommend adding snippets like this to your site via a plugin like Code Snippets. This will make sure that your custom code isn’t lost when you update Storefront or any Storefront Child Theme.

Create your menu

↑ Back to top
The first step is to create your menu and assign it to the Secondary Menu location. Add as many custom links to your preferred social networks as appropriate. Each custom link should look similar to this image below:  

Load Font Awesome Brands

↑ Back to top
Storefront already includes social icons thanks to the FontAwesome icon collection. If you want to try using the included icons skip to adding the CSS. These icons are periodically updated in Storefront itself, so if you find an icon is out of date or just missing there are two things you can do for us. First, open an issue for the icon via our repo on GitHub. Alternatively, FontAwesome offers kits for you to use on your site. You can create one free kit and this is automatically kept up to date via the awesome folks at FontAwesome. Once you have a kit created you’ll get a URL for that kit. Grab that URL and add it in the following function via the Code Snippets plugin on your site:
<?php
function add_fontawesome_kit() {
    wp_register_script( 'fa-kit', 'https://kit.fontawesome.com/4861f2b45b.js', array( 'jquery' ) , '5.9.0', true ); // — From an External URL
// Javascript – Enqueue Scripts
    wp_enqueue_script( 'fa-kit' );
}
add_action( 'wp_enqueue_scripts', 'add_fontawesome_kit', 100 );
view raw fontawesome.php hosted with ❤ by GitHub

Add the CSS

↑ Back to top
Now we can add the following CSS to your site via the Additional CSS section in the Customizer, your child theme, or custom CSS plugin. Feel free to only use the social networks needed as this example includes ALL of them:
.secondary-navigation a[href*="dribbble.com"], .secondary-navigation a[href*="facebook.com"], .secondary-navigation a[href*="flickr.com"], .secondary-navigation a[href*="foursquare.com"], .secondary-navigation a[href*="plus.google.com"], .secondary-navigation a[href*="instagram.com"], .secondary-navigation a[href*="linkedin.com"], .secondary-navigation a[href*="pinterest.com"], .secondary-navigation a[href*="reddit.com"], .secondary-navigation a[href*="tumblr.com"], .secondary-navigation a[href*="twitter.com"], .secondary-navigation a[href*="vimeo.com"], .secondary-navigation a[href*="wordpress.com"], .secondary-navigation a[href*="wordpress.org"], .secondary-navigation a[href*="youtube.com"], .secondary-navigation a[href*="mailto:"], .secondary-navigation a[href*="twitch.tv"], .secondary-navigation a[href$="/feed/"] {
text-indent: -9999px; }
.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href*="twitch.tv"]:after, .secondary-navigation a[href$="/feed/"]:after {
text-indent: 0;
display: block;
float: left; }
.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="twitch.tv"]:after {
font-family: "Font Awesome 5 Brands";
font-weight: 400; }
.secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href$="/feed/"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900; }
.secondary-navigation a[href$="/feed/"]:after {
content: "\f09e";
color: #ff9900; }
.secondary-navigation a[href*="twitch.tv"]:after {
content: "\f1e8";
color: #6441A5; }
.secondary-navigation a[href*="mailto:"]:after {
content: "\f0e0"; }
.secondary-navigation a[href*="youtube.com"]:after {
content: "\f167";
color: #bb0000; }
.secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after {
content: "\f19a";
color: #0073aa; }
.secondary-navigation a[href*="vimeo.com"]:after {
content: "\f194";
color: #aad450; }
.secondary-navigation a[href*="tumblr.com"]:after {
content: "\f173";
color: #32506d; }
.secondary-navigation a[href*="reddit.com"]:after {
content: "\f231"; }
.secondary-navigation a[href*="twitter.com"]:after {
content: "\f099";
color: #00aced; }
.secondary-navigation a[href*="dribbble.com"]:after {
content: "\f17d";
color: #ea4c89; }
.secondary-navigation a[href*="facebook.com"]:after {
content: "\f09a";
color: #3b5998; }
.secondary-navigation a[href*="flickr.com"]:after {
content: "\f16e";
color: #ff0084; }
.secondary-navigation a[href*="foursquare.com"]:after {
content: "\f180";
color: #0072b1; }
.secondary-navigation a[href*="plus.google.com"]:after {
content: "\f0d5";
color: #dd4b39; }
.secondary-navigation a[href*="instagram.com"]:after {
content: "\f16d";
color: #517fa4; }
.secondary-navigation a[href*="linkedin.com"]:after {
content: "\f0e1";
color: #007bb6; }
.secondary-navigation a[href*="pinterest.com"]:after {
content: "\f231";
color: #cb2027; }
view raw icons.css hosted with ❤ by GitHub
This will iconize links to:
  • Dribbble
  • Facebook
  • Flickr
  • Foursquare
  • Google Plus
  • Instagram
  • LinkedIn
  • Pinterest
  • Reddit
  • Tumblr
  • Twitter
  • Vimeo
  • WordPress.com
  • WordPress.org
  • YouTube
  • Twitch
  • Any mailto: link
  • RSS feeds
If you’re familiar with CSS, you can add others from FontAwesome but this list should cover the majority.

The results

↑ Back to top