Font Awesome Buttons

code × August 5, 2013

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

Another Dribbble inspired project!

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. This value can be set a 1em to fit comfortably with text.

CSS octagon Triangles