Why you Should Start Using Font Awesome

Posted in Design by WP Engine

Last updated on November 13th, 2023

Font Awesome is a robust icon set that contains scalable vector icons. And amazingly enough, it is free (icons sets can be quite expensive, making this a pretty sweet deal). There are many important types of icons that come with Font Awesome: social media, UI/web-related, and more!

Icons are important to web projects because they are a visual way to help add meaning to elements. Font Awesome allows for an easy addition to your WordPress theme, saving valuable time because you do not need to create and save these graphics yourself.

Font Awesome is great because…

It’s a Font

From the name, it is pretty obvious what the format is, but that’s what makes Font Awesome so neat. As you know, there are other options instead of using a font to display icons. You may be familiar with other approaches such as using individual images or site specific sprite-sheets for icons. Whether they’re SVG, raster, or a font, icon graphics are a series of images used in specific parts of the site. These parts may be the search bar, navigation, loading icons, or any other place where indicator graphics would be appropriate.

It’s Retina Ready and Easy to Style

Designers love the use of icons as fonts because of the flexibility of styling available. Plus, using a font will also render icons as sharp as your device will allow, so there’s no need to worry about creating retina graphics since Font Awesome will give you high-quality iconography on every device. In the current age of responsive design, this is more important than ever. CSS is used to style the font and can easily change the color, size, drop shadow, or any other customizations of an icon. You get all of the styling benefits of regular text, but now with icons!

Browsers Dig Font Awesome

There is no need to worry about Font Awesome’s browser compatibility; it’s well supported by all modern browsers. With all file formats included (.eot, .ttf, .woff, and svg), it’s treated the same as other web fonts.

It has a Performance Advantage

We all love fast websites, so it’s important to provide that experience to your users. All the icons are included in one font file, so it only takes a single HTTP request to load Font Awesome. This is great for performance so it’s worth considering Font Awesome as a solution.

Font Awesome in Action

You’re probably used to the normal characters or a font from your daily typing. Characters such as “A,” “B,” “C,” etc. are part of your daily communications. Icon fonts are just like any other font, except that the characters are styled to look like icons. The font defines the characters that are found within the site, enhanced by these rendered icons.

Using Icons in your HTML

If you take a look at the CSS file, you’ll see that we are using the CSS3 :before selector, which inserts the content before the HTML object that the class is applied to. The content property is used to define the Unicode character, as you can see by this string of characters.

What is going on here? For the display of an icon, the fa class is needed. This is what “connects” it to the Font Awesome font. To display the correct icon, the second class name will correspond with the icon you wish to display, in this case it is fa-cloud (make note of the Unicode reference, which we mentioned previously).

To display the cloud, this is the line of code that is needed:

&lt;i class="fa fa-cloud"&gt;&lt;/i&gt;

Cloud icon in Font Awesome. Why you Should Start Using Font Awesome

Do you want this to appear next to text? If so, you’re in luck. Just make it part of the paragraph.

&lt;p&gt;&lt;i class="fa fa-cloud"&gt;&lt;/i&gt; This is a cloud.&lt;/p&gt;

Twitter icon in font awesome. Why you Should Start Using Font Awesome

Adding links is just as easy:

&lt;a class="fa fa-twitter" href="http://twitter.com/morelink" title="Twitter" target="_blank"&gt; Twitter&lt;/a&gt;

Pseudo use with Content

There may be occasions where it will be more effective to use the pseudo class. For example, if the class will be used a lot, this approach would be more efficient. It would look something like this:

.intro .widget-title:before {

font-family: FontAwesome;

padding-right: 10px;

content: "\f05a";

}

Notice the content is the Unicode reference for the speech bubble.

More Practical Options

Font Awesome offers more than what designers may realize. It’s easy to rotate, scale, and pull icons. Also, there are some animation options that come right out of the box. Read more about Font Awesome options.

A heart icon showing different rotation options in Font Awesome. Why you Should Start Using Font Awesome

With a simple class addition, it’s easy to love these rotated icons:

&lt;i class="fa fa-heart"&gt;&lt;/i&gt; normal&lt;br&gt;
&lt;i class="fa fa-heart fa-rotate-90"&gt;&lt;/i&gt; fa-rotate-90&lt;br&gt;
&lt;i class="fa fa-heart fa-rotate-180"&gt;&lt;/i&gt; fa-rotate-180&lt;br&gt;
&lt;i class="fa fa-heart fa-rotate-270"&gt;&lt;/i&gt; fa-rotate-270&lt;br&gt;
&lt;i class="fa fa-heart fa-flip-horizontal"&gt;&lt;/i&gt; fa-flip-horizontal&lt;br&gt;
&lt;i class="fa fa-heart fa-flip-vertical"&gt;&lt;/i&gt; icon-flip-vertical

Convinced?

It’s easy to see why so many designers love Font Awesome—try it out on your next design to see if you love it too!

And to ensure every icon load quickly and appears with crystal clarity, make sure you’re using the best possible WordPress hosting for all your projects.