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.

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

↑ Revenir en haut

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

↑ Revenir en haut

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: https://gist.github.com/ryanr14/cc4be39da54af89c31becd7f070eb7e1

Add the CSS

↑ Revenir en haut

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: 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

↑ Revenir en haut