Alan Simpson

Alan Simpson

Code Quickies

More Code Quickies

FontAwesome Social Media Icons

Link your website to your Facebook, Twitter, LinkedIn, and other social media properties using FontAwesome, HTML, and CSS

For this to work, you need the FontAwesome css and fonts folders in your site.

FontAwesome folders in a web site

If you're using an external style sheet, @import the font-awesome.min.css style sheet into that. The relative reference inside the url() parentheses must be correct for your site or this won't work.

In the page, where you want to show social media links, create a div with class="smicons" applied. Inside that you'll need a link to each social media site. In the class= attribute for each link add fa (for font awesome) and then fa-name for the specific icon you want to show, as in the example below. The video above explains it all in more detail. The cheat sheet for FontAwesome icon names is at

Add Sharing Icons and Open Graph tags to your pages.

Join my mailing to be notified of new video tutorials and classes.