Font Awesome: The Complete Library Guide



Free icons Font Awesome: what it is and what it is used for. How to connect icons to the site. Advantages and disadvantages of the library.

What is Font Awesome and what is it used for on the site. Library benefits.

Font Awesome Icon Set: The Ultimate Guide

Font Awesome is a set of fonts and icons based on CSS and Less. The tool allows you to quickly connect all kinds of icons to the site, significantly improving its design and usability. It is enough to insert a few lines of code.

In FontAwesome, all icons are absolutely and completely free. The library is licensed under the GNU General Public License. This means that it can be freely used in commercial projects and, in principle, everywhere.

The set was created by Dave Gandhi. It includes free social media icons, icons to improve the user interface, and more.

Typically, Font Awesome font scripts are used in conjunction with Bootstrap and BootstrapCDN. Font Awesome is second only to Google Fonts in popularity.

How it works

The main feature is that all  Font Awesome icons ‌  are not static images. They are in font format. In other words, these are icon fonts. For example, a search icon or a social network logo is the same as the simple characters A, B, C.

Font Awesome icons are created using scalable vectors. Therefore, they can be increased to almost any size.

All available icons are included in one font file. All you need is to download this file from the official site and connect it in styles.

Why designers choose Font Awesome

Font Awesome has a number of advantages:

  • Fast connection. You just need to download a special file from the official website and connect it by specifying the path to it in the CSS code.
  • Flexibility and scalability. The icons can be enlarged to any size. The symbols will be as clear as the device allows. In the age of responsive design, this is important. By the way, for the same reason,  Font Awesome icons ‌  are suitable for Retina displays.
  • Stylization. Icons can be easily changed in color, size, shadow or any other external parameters. The designer gets all the benefits of styling regular text. You can also rotate the icons. For example, display upside down or rotate 90 degrees.
  • Fast loading of the site. All icons are included in one font file. So it only takes one HTTP request to load Font Awesome. This is great for website performance.
  • Love of browsers. Font Awesome is a cross-browser tool. You don't have to worry about browser compatibility of fonts and icons. They are well supported by all of them. Even old IE8.
  • Compatible with different frameworks. The library was created primarily for Bootstrap. However, it will work well with other frameworks as well.
  • Several formats. The tool is available in .eot, .ttf, .woff and svg formats. So Font Awesome is handled in the same way as other web fonts.
  • No JavaScript required. Font Awesome does not require JavaScript to run.

Thus, Font Awesome is an effective and convenient tool that significantly saves layout time and speeds up your website.

Disadvantages of Font Awesome

The tool also has disadvantages. Fortunately, there are not many of them.

First, icons can only be painted in one color. However, this limitation can be circumvented. For example, combining free icons with each other. Or using CSS effects

Secondly, the Font Awesome library contains too many icons and they are all included in one file. If a designer or layout designer only needs to connect a couple of icons, they still have to load the entire library completely. And these are hundreds of thousands of extra icons that will take up space. However, there is a solution here too - creating your own assembly, which will include only the necessary icons.

Font Awesome versions: 5 and 6

Font Awesome 5 was released on December 7, 2017 and originally contained 1278 icons. The fifth version comes in two packages: free (Font Awesome Free) and paid (Font Awesome Pro). The free plan also contains icons from all fourth versions. The icons are available under the SIL Open Font License 1.1, Creative Commons Attribution 4.0, and MIT.

SIL OPEN FONT LICENSE (OFL-1.1) | Open Source Initiative
Creative Commons — Attribution 4.0 International — CC BY 4.0
The MIT License | Open Source Initiative

Font Awesome 6 is a new version that was released in the second half of 2020. It includes new icons and is only available in a paid plan.

Font Awesome 6 Alpha is also on the way in 2021. This is another new generation of icon library. In addition to the new icons, version 6 Alpha also adds new styles, new services, and assistive tools. Users can pre-order.

Free and paid plans: differences and features

You can download icons for free or paid tariff plan.

The free plan includes over 1600 icons and 1 set. A kit is a collection of icons, styles, and settings that allows you to quickly make changes without adding code.

Paid tariff:

  • Includes over 7800 icons and 20 sets.
  • Provides access to Font Awesome Pro. This means that the icons can be used in native mobile applications and on your computer (for example, in a Word text editor or when creating a presentation in Powerpoint).
  • Allows you to upload your own icons. You can use your own icons alongside or in place of the official Font Awesome icons. For example, this is how you can upload a company logo. You can perform the same actions with your own icons as with the basic ones - change the style, size, color, etc.

Both versions are perpetual. That is, they are provided once and for all.

Ways to connect Font Awesome

First of all, you need to go to the official website and download the library. The downloaded archive must be unpacked and the css and fonts folders copied to your site folder.

After that, the path to the library file is specified between the head tags. For example:

How to display  Font Awesome icons ‌  on a website. Most popular methods:

1.Using HTML

The easiest way.

You need to go to the gallery on the official website (fontawesome.com/icons?d=gallery) and choose the icon you like. Each icon has a personal code, for example:. It is enough to copy and paste it in the right place in the code.

2. Via CSS

To do this, use the pseudo-elements after or before, as well as the Unicode of the required icon. You can take it all in the same gallery. An example of such code: f209.

An example of a style file entry:

div::after {display: block; content: 'f209'; font-family: 'Font Awesome 5 Free';}

In conclusion: all Font Awesome icons

Thus, Font Awesome is a fast and convenient way to add free icons to your website. All icons are easily scalable and do not slow down the site.




Comments (0)

Leave a comment