Font Awesome Buttons

code • August 5, 2013

Another Dribbble inspired project!

See the Pen Font Awesome Buttons by Katy DeCorah (@katydecorah) on CodePen

I’ve been using Font Awesome as my icon font for nearly every project. So many fonts to choose from, plus it’s CDN hosted. Nothing like upping that PageSpeed score!

I created simple-to-mark-up buttons. Add the desired Font Awesome icon class to the anchor tag along with icon-btn and specify the color with icon-blue (or red or purple). The icon-btn class draws a simple and proportional circle around the icon. The icon color class will specify its respective color gradient background.

I gave the icon-btn a larger font-size to magnify the detail. I set this value at 1em to fit comfortably with text.

Keep reading code