Social media icons using Font Awesome

Hello,

I just wanted to thank Raam Dev again for the great theme Independent Publisher – and I wanted to share my solution for adding further social media icons using Font Awesome. I have a profile on Medium.com that I wanted to include in the Social Menu; however, there is no icon in the Genericons font for that. Many other platforms are also missing. In that case, you get a star as an icon in the social menu. I’m sure many users have experienced this (there was an issue regarding this, but it’s closed, so I opened a new topic instead).

I am using version 1.8 of the Independent Publisher theme on a self-hosted WP installation (not WordPress.com).

In his documentation, Raam has outlined how to use custom icons, such as PNGs. But instead of creating images for the missing icons, I wanted to use a different icon font.

I am using Font Awesome. On their “Get started” page, download the ZIP and upload the contents to your WP installation, e.g. in the folder “font-awesome” in your child theme folder. You then need to enqueue the Font Awesome CSS in your functions.php:

wp_enqueue_style( 'font-awesome-css', get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.min.css', array(), '1.0.0', 'all' );

Then you are ready to use Font Awesome icons. In my example, to make an icon appear for Medium.com in the Social Menu, I’ve added the following to the CSS of my child theme:

#menu-social li a[href*="medium.com"]::before {	font-family: 'FontAwesome'; content: '\f23a'; opacity: 0.5; }

#menu-social li a[href*="medium.com"]:hover::before { opacity: 1; }

Note that f23a is the unicode value for the specific icon. On the Font Awesome website, you can look up a range of icons for other social networks and brands. Also, in my example, no color was assigned; the theme normally uses #BBC7D3 for the social icons and #4A4A4E for the hover state. Personally, I prefer the standard green of the theme’s link color with an opacity of 0.5 and 1 for the hover state (as you can see on my personal website).

You can of course use Font Awesome icons (even animated ones) anywhere else on your website following their examples.

I hope I have explained my solution well. Thanks again for such a great theme (and now for version 1.8)!

The page I need help with: [log in to see the link]