Automatic Social Menu SCSS Styling with FontAwesome Icons

Do you hate dealing with styling social media icons in a WordPress theme? Wish there was a seamless way to manage social links using the WordPress menu without having to use CSS classes?

This is a very interesting way to set the FontAwesome icons for social menu items automatically by selecting the elements using a wildcard href attribute search.

SCSS for Automatic Social Icon Menu Styling

This is a SCSS file that you can pretty much just drop into your theme, import it as one of your SCSS files, and run your npm/gulp script. Make sure you change the id tag on line 6 to match the name you chose for your menu.

$social-icon-size: 20px;
$social-icon-spacing: 10px;
$social-icon-color: lighten($blue, 45%);
$social-icon-hover-color: $white;
 
#menu-social-menu{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    li {
        position: relative;
        border: none;
        width: $social-icon-size + ($social-icon-spacing * 2);
        padding: 0 $social-icon-spacing;
        margin: $social-icon-spacing 0 !important;
        text-align: center;
        // max-width:20%;
        &:not(:first-child) {
            border-left:1px solid $social-icon-color;
        }
        a {
            text-indent: -9999px;
            display: inline-block;
            font-size: $social-icon-size;
            line-height: 1;
            &:hover:after {
                color: $social-icon-hover-color !important;
            }
        }
        a[href*="dribbble.com"], a[href*="facebook.com"], a[href*="flickr.com"], a[href*="foursquare.com"], a[href*="plus.google.com"], a[href*="instagram.com"], a[href*="linkedin.com"], a[href*="pinterest.com"], a[href*="reddit.com"], a[href*="tumblr.com"], a[href*="twitter.com"], a[href*="vimeo.com"], a[href*="wordpress.com"], a[href*="wordpress.org"], a[href*="youtube.com"], a[href*="mailto:"], a[href*="twitch.tv"], a[href$="/feed/"] {
            text-indent: -9999px;
            &:after {
                font-family: FontAwesome;
                text-indent: 0;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0; 
            }
        }
        a[href$="/feed/"]:after {
            content: "\f09e";
            color: $social-icon-color;
        }
        a[href*="twitch.tv"]:after {
            content: "\f1e8";
            color: $social-icon-color;
        }
        a[href*="mailto:"]:after {
            content: "\f003";
        }
        a[href*="youtube.com"]:after {
            content: "\f167";
            color: $social-icon-color;
        }  
        a[href*="wordpress.com"]:after, a[href*="wordpress.org"]:after {
            content: "\f19a";
            color: $social-icon-color;
        }
        a[href*="vimeo.com"]:after {
            content: "\f194";
            color: $social-icon-color;
        }
        a[href*="tumblr.com"]:after {
            content: "\f173";
            color: $social-icon-color;
        }
        a[href*="reddit.com"]:after {
            content: "\f231";
        }
        a[href*="twitter.com"]:after {
            content: "\f099";
            color: $social-icon-color;
        }
        a[href*="dribbble.com"]:after {
            content: "\f17d";
            color: $social-icon-color;
        }
        a[href*="facebook.com"]:after {
            content: "\f09a";
            color: $social-icon-color;
        }
        a[href*="flickr.com"]:after {
            content: "\f16e";
            color: $social-icon-color;
        }
        a[href*="foursquare.com"]:after {
            content: "\f180";
            color: $social-icon-color;
        }
        a[href*="plus.google.com"]:after {
            content: "\f0d5";
            color: $social-icon-color;
        }
        a[href*="instagram.com"]:after {
            content: "\f16d";
            color: $social-icon-color;
        }
        a[href*="linkedin.com"]:after {
            content: "\f0e1";
            color: $social-icon-color;
        }
        a[href*="pinterest.com"]:after {
            content: "\f231";
            color: $social-icon-color;
        }
    }
}