503.389.0620 contact@stellarnine.com

Font Awesome Icons

Font Awesome Icons

Do you know about Font Awesome? It gives you customizable scaleable CSS icons for all sorts of things. With a small bit of HTML and CSS, you can have social icons, navigation icons – literally hundreds of different icons for your web application or website. I love it because I can change the color and size easily and simply, plus it looks great on all my devices – mobile, tablet, and desktop.

The way it works is with a font file. You have a couple of options using the free Font Awesome assets – either download and host the font file yourself, OR grab a quick embed CDN code from their website and slap it into your website’s head section. That’s it! Now you have hundreds of icons available with a minimal amount of code.

Here’s an example. This Snapchat icon:

 

is achieved with this bit of HTML code:

<i class="fa fa-snapchat-square fa-5x" aria-hidden="true"></i>

You can implement social icons like this:

 

With simple HTML code that looks like this:

<i class="fa fa-facebook" aria-hidden="true"></i>

<i class="fa fa-vimeo" aria-hidden="true"></i>

<i class="fa fa-twitter-square" aria-hidden="true"></i>

<i class="fa fa-pinterest-p" aria-hidden="true"></i>

There are also animated icons, payment icons, list icons, navigational icons, medical icons, and logo icons. You can rotate any icon by adding the CSS class “fa-rotate-90,” such as in the case of an arrow icon.

To see more examples and implement Font Awesome icons for yourself, visit: http://fontawesome.io