Update 12-21-2016: Font Awesome use has changed dramatically in the last 18 months. I will be adding a post covering both Font Awesome and Dashicon usage and best practices.
In this tutorial I will show you how to use Font Awesome to create social sharing links for your website. With Font Awesome there is no need for custom graphics, icons or images.
Font Awesome – The Icon Font
Font Awesome is called the “Icon Font” for good reason. First, checkout the Font Awesome project page. There are great examples how to use and size these icons.
We are going to make this:
Why Use CSS Based Icons?
First Answer: Front End Speed.
Second Answer: Clean and pixel perfect any size.
Loading icons as a CSS style is much faster than loading images (gif, jpg, png). You can also edit colors and sizes with just a few keystrokes instead of changing graphics and exporting. Font Awesome is – awesome!
Example: CSS Using Font Awesome
For this example, let’s use Font Awesome for classic social sharing buttons. Place the code snippet below in your child theme CSS file.
Example: HTML Using Font Awesome
Here is the HTML for an unordered list with Facebook, Twitter, Google Plus and Pinterest social links. Place the code snippet below where you want the social buttons to appear, usually the footer or the sidebar.
The Result – Text Based Icons
Web Design Topic: How to use Font Awesome to create simple social sharing links.