Font Awesome Buttons

Font Awesome Buttons

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. I set this value at 1em to fit comfortably with text.


Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.