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.
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 topThe 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 topStorefront 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ); |
Add the CSS
↑ Back to topNow 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; } |
This will iconize links to:
- Dribbble
- Flickr
- Foursquare
- Google Plus
- Tumblr
- 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.