Next Level Font Awesome

Font Awesome is well...fantastic! Thought I was going to say awesome, huh? Well, yeah. It is awesome. The name really says it all.

Posted By: Tony Strack on Jan 2, 2018, 4:00 PM

As one of the more popular icons fonts, it was introduced in 2012 as a tool for use with Twitter Bootstrap. The font offers scale-able vector icons that are CSS-friendly for easy customization.

First let's head over to the Font Awesome Library on Github. Here you'll see over 500 icons ready for your disposal. Everything from commons icons like directional, video player and application icons to fun ones, like rockets, paper airplanes and even beer! And of course a whole slew of brand icons like Facebook, Twitter and YouTube. Their documentation is simple and straight forward.

I'm going to show you a few examples of some social media icons. Hopefully this will give you some inspiration for your next project.

In this first example I will show your near bare minimum styling for some social media links. I'll apply some sizing, margin and a simple hover effect.

See the Pen jaKQgO by Tony Strack (@tone4407) on CodePen.

Not bad, but these could definitely use some love to make them really stand out. And with web fonts, it's so easy, so why not?

Let's try a to apply some brand colors to their respective social icons. The old Facebook and Twitter blues and some YouTube red. Don't forget the white font color. 'Merica! Since were essentially working with font, all we need to do is apply the color property to the icons. Let's check out the code.

HTML/CSS

See the Pen Font Awesome Social 2 by Tony Strack (@tone4407) on CodePen.

And just like that, we have the classic, branded social media icons.

In the next example I'm going to switch up the brand colors and go a custom route. Perhaps you'd use the brand colors for you, your company or your client? Just like the example about, I'll edit the color property. I'm also going to apply a circle shape rather than the square. Simply add the border radius property and you've got that circle!

HTML/CSS

See the Pen Font Awesome Social 3 by Tony Strack (@tone4407) on CodePen.

Custom, branded colors all wrapped up in a nice 'lil circle. Fancy pants.

Let's try something a little more advance, a little more fun and interactive. In this next example I'll show you a relatively simple way to achive a button look and on hover it will look like the button is being pressed. I'm going to use a subtle border-radius to round the corners and then apply a box shadow at the bottom to give it some dimension. On hover, I will adjust the box shadow size and move the position of the button down a couple pixels to mimic a button being pressed down.

HTML/CSS

See the Pen Font Awesome Social 4 by Tony Strack (@tone4407) on CodePen.

Not too shabby, huh? This is a trendy button style I've see around the web as of late. If you want to really achieve a button look, maybe use the :active state instead of :hover so it animates on click.

Speaking of trends, let's move on to a hot one – flat 3d. I'll use the custom colors from before and then apply some text shadows (25 to be exact) and distance them 1 pixel apart incrementally.

HTML/CSS

See the Pen Font Awesome Social 5 by Tony Strack (@tone4407) on CodePen.

I like it! And it's not hard at all. You could also try using RGBA values to fade out the shadow. Maybe have the shadow come in from a different angle. Oh the possibilities.

So there you have it. Some great examples on Font Awesome and why it is just that. So easy, so customizable, all with HTML & CSS. That means no images which saves you work, bandwidth and load time! You can continue to take these even further, but hopefully this gives you a little insight and inspiration for your next project.

Back to Blog