Best Uses for Font Awesome Icon Fonts

Font Awesome is a truly awesome tool for easily adding icons to your sites using either HTML or CSS. There are so many varieties of icons to choose from that they Font Awesome icons are really versatile and can be used in so many ways and for so many different types of projects. Here are some of our favorite ways to use this icon font:

1. A really fun way to use Font Awesome icons is to create your site’s social media icons purely from code — no pngs or photo editing software necessary. Using icons over images to create your social media icons lets you have greater control over the styling. Check out a tutorial on how to create these social media icons here.

Join us in our newest publication:

Screen Shot 2016-06-28 at 9.40.37 AM

2. It’s also really easy to animate Font Awesome icons and use them as a page load progress symbol. This process is a lot simpler than creating a pure CSS loader, and is also a nice alternative to using a gif to produce the same effect.

3. A unique way to use an Icon Font is to style your lists. Any icon can easily take the place of a bullet, disc, or number. All you need to do is set your list-style-type to none and then use the :before pseudo-selector to place any icon of your choice in front of the list items. Find an in-depth tutorial on how to achieve this effect here.

Screen Shot 2016-06-06 at 5.40.05 PM

Share and Enjoy !

0 0