Partner With Vanguard

Font Awesome is a free font icon library consisting of more than 600 icons that relies on CSS rather than static images to generate over 600 icons to enhance a website. Font Awesome has a 38% market share for sites that use third-party fonts, ranking second to Google Fonts.

Using Font Awesome icons greatly reduces the level of effort in creating icons and saves developer’s time by the flexibility of changing colors using CSS attributes instead of using Adobe Photoshop to export images.

Legacy Methods of Generating Icons:

A lot of things have changed in creating websites, but one of the things that has stayed the same is generating images. When generating an image for a site, you would see something like this:

<img src=”images/nav-bar.jpg” />

This method serves up a static image on the site and it would be up to the developer or a designer to generate and export that icon via Adobe Photoshop as well as making sure the image dimensions are the correct size in relation to the content. There is absolutely nothing wrong with this method and we still use this approach on sites, but when it comes to icons, there are better options that we’ll discuss later. 

Another approach would be utilizing a background image. This method still involves generating a static image, but instead of referencing it with an <img> attribute, you would generate it as a CSS background image to a specific element:

<a href=”#” class=”nav-bar”>Navigation</a>

Additionally, you would need to create the CSS to generate that image to the element

.nav-bar {
    display: block;
    width: 20px;
    height: 20px;
    background: url(images/nav-bar.jpg);
}

Again, this allows for the icon to be generated via CSS, however you would still need to create that icon and make graphical changes to the graphic via Adobe Photoshop . Additionally, if you wanted to add a hover effect for that icon, you would need to either generate a completely different image or use an image sprite. 

The Advantages of Font Awesome Icons

Convenience

With Font Awesome, you have a library to pick and choose pre-rendered icons from. The icons have a similar look and feel to them, making graphical continuity easy. This greatly reduces time in having to create icons by a designer as well as managing several image assets. 

Additionally, if you decide to change a site’s color scheme, you can target CSS to make a global change rather than having to recreate each and every instance of an icon. 

Flexibility

A huge advantage to Font Awesome is, well, it is a font. So, you can use CSS attributes to change its color, add shadows, or change the size for different responsive viewports. You can also easily change the CSS for hover states without having to import another file, as it’s just matter of adding the :hover selector. Additionally, it will always look as crisp as can be since it is a vectored font and no matter the size, it will remain sharp and clear. 

Performance

Who doesn’t like a fast website? Since all the icons are being generated via one local file, there will only be one HTTP request as opposed to loading several images to cater to your icon needs. 

Using Font Awesome Icons

Getting Font Awesome set up on your website is as easy going to their website and including their CSS to your project and you’re ready to go!

<link rel="stylesheet" media="screen" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

From there, you can go ahead and reference the library and copy and paste the code anywhere on your site like this:

HTML

<i class="fas fa-bars"></i>

You can also add inline styles or your own class to customize your icon:

HTML

<i class="fas fa-bars" style="color: #EC7C00; font-size: 2rem; box-shadow: 1px 1px 5px rgba(0,0,0.3)"></i>

Finally, you can use Font Awesome icons as pseudo elements to other elements! 

HTML

<a href="#" class="nav-bar">Menu</a>

CSS

.nav-bar:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 8px;
    color: #EC7C00;
}

Menu

If you want to get fancy, you can even add hover states to icons

HTML

<a href="#" class="nav-bar">Menu</a>

CSS

.nav-bar:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 8px;
    color: #EC7C00;
    transition: all ease-in-out .3s;
.nav-bar:hover:before {
    color: #00223F;
    transform: scale(1.1);
}

Menu

Conclusion

Using Font Awesome for generic icons is a great way to add a consistent look and feel to your site as well as providing a great deal of performance and scalability. You can find out more by visiting FontAwesome.com or reaching out to your Vanguard Client Manager. 

_{This web site is not endorsed by, directly affiliated with, maintained, authorized, or sponsored by fontawesome.com}