In this simple tutorial I’m going to show you how you can now replace your Social Buttons with Font Awesome Icons and a bit of CSS styling for WordPress. And the even better news? You can easily adapt it to work with your own WordPress site. You won’t believe how simple it is to do this.
Why Would I Want This?
If you want simple easy to re-use code for creating custom social media icons quickly and easily. Then this is for you. Also you no longer have to fiddle with image icons or even worse creating a sprite and having to position them on the screen so they line up. Now with Font Awesome they provide icons that look great and are easy to code/style. You get the look you want and the site gets to load a tad bit quicker as it won’t have to put in as much work to display them on the screen.
What Do You Need?
Font Awesome (for WordPress)
There are two ways to get Font Awesome installed so you can use it. You could install Font Awesome directly onto your web server and go through and make sure you import the necessary CSS files from the Font Awesome Git Hub page. Or if you want an easier solution? Get the Font Awesome Icons plugin from WordPress.org and have it do the work for you. Plus you can then easily use Font Awesome anywhere on your blog.
Widget Areas
This is designed to be placed into your Widget areas on your site. I also made it so you only have to tweak the font size to get it to re-size properly into the Widget area you want to place it in.
How to Install
To use this you will need to create a new Text Widget and paste the HTML code in (make sure to add your own user names!) then hit Save.
After you do that you will need to copy/paste the CSS code into your Themes Stylesheet. Since I use Genesis? It was as simple as going to Appearance -> Editor and select the style.css and paste it in and click Save. So your own results may vary as I haven’t tested this on all of the themes available out there.
Note: The only downside to doing it the way I did? If you have a Responsive design like I do using Genesis. You’ll either have to leave the default font size and deal with the size. Or place the necessary font size in the @media section so it scales down properly.
And I’ve noticed that depending on where you place this code on your site the text will default to whatever the widget’s link color is. You will have to tweak the CSS style here as well for it to display the way you want to.
Read More: Theme Update to Genesis News Pro | avgjoegeek Change Log
The Code
Below is the code you’ll need to use to display the icons. The only one I didn’t use is LinkedIn. But you can easily add, remove, or rearrange the reshuffle the code to your own needs. To see what other icons are available for use you can check out the Font Awesome Cheat Sheet and go from there.
Example with Font Awesome and CSS!
Note: This has been tested to work with IE 11, Firefox, Chrome, and Safari without any issues.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// Widget Code <div class="ajg-social-icons"> /* RSS Feed (Feedburner but will work with any Feed URL */ <a href="http://feeds.feedburner.com/CHANGE NAME HERE"> <span class="icon-stack rsshov"> <i class="icon-stack-base"></i> <i class="icon-rss"></i> </span> </a> /* Google Plus */ <a href="http://plus.google.com/CHANGE NAME HERE"> <span class="icon-stack googhov"> <i class="icon-stack-base"></i> <i class="icon-google-plus"></i> </span> </a> /* Facebook */ <a href="http://www.facebook.com/CHANGE NAME HERE"> <span class="icon-stack fbhov"> <i class="icon-stack-base"></i> <i class="icon-facebook"></i> </span> </a> /* Twitter */ <a href="http://www.twitter.com/CHANGE NAME HERE"> <span class="icon-stack twithover"> <i class="icon-stack-base"></i> <i class="icon-twitter"></i> </span> </a> /* Pinterest */ <a href="http://www.pinterest.com/CHANGE NAME HERE"> <span class="icon-stack pinhov"> <i class="icon-stack-base"></i> <i class="icon-pinterest"></i> </span> </a> /* YouTube */ <a href="http://www.youtube.com/CHANGE NAME HERE"> <span class="icon-stack youtubehov"> <i class="icon-stack-base"></i> <i class="icon-youtube"></i> </span> </a> </div> |
CSS Styling
The example I show below is what I did to style it so it matches my own theme. Its dark and the color pops up when you highlight over it. Again with a bit of CSS style tweaks you can easily turn the buttons into circles, display the color instead or just about anything else you can imagine. Your only limited by what CSS can do and what the browser supports.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/* CSS Styling for Font Awesome Social Media Buttons ------------------------------------------------------------*/ /* Change the Font Size to Fit Your Widget Area */ .ajg-social-icons { font-size: 18px; font-size: 1.8em; } .ajg-social-icons a { text-decoration:none; color:#fff; } .ajg-social-icons span { display:block; background-color: #000; /* You could make them round by changing the value to 50% */ border-radius: 3px; } .ajg-social-icons .rsshov:hover { background-color: #FF6600; color: #fff; } .ajg-social-icons .googhov:hover { background-color: #F90101; color: #fff; } .ajg-social-icons .fbhov:hover { background-color: #3B5998; color: #fff; } .ajg-social-icons .youtubehov:hover { background-color: #e52d27; color: #fff; } .ajg-social-icons .pinhov:hover { background-color: #C92228; color: #fff; } .ajg-social-icons .twithover:hover { background-color: #4099FF; color: #fff; } |
Conclusion
As you can see (or hopefully can) that using Font Awesome to create and style your Social Media Buttons is pretty quick and simple. What I provided was a starting point. You can end up changing the CSS code so it displays the button colors instead of black. Or you could have the buttons be the correct colors of the social media icons. Or you could just have the icons themselves without any type of box around it. Your only going to be limited by what CSS is able to do.
You could also create your own social share buttons for your post and use just straight HTML links too! But that is going to have to be for another tutorial. So make sure to sign up to the Newsletter to keep updated! (Its that thing you skipped past at the top of the page btw)
What do you think though? Is this something you will use for your own WordPress projects? Would you rather just use a Plugin that does the work for you? Continue the discussion below and I’ll be more than happy to try and answer any questions you might have with using this.
