Add Free Icons to a Web App

Submitted by nanodano on Thu, 07/18/2019 - 07:16

Introduction

This will demonstrate how to install and use the Font Awesome free icon pack. The files will be hosted on your own server without using a CDN. We will look at the minimal installation with the least amount of files for maximum efficiency.

Download

Start by going to the download page and download the latest zip release.

At the time of this writing, the latest release is v5.9.0 and the direct download link is: https://use.fontawesome.com/releases/v5.9.0/fontawesome-free-5.9.0-web.zip

They have a free package and a premium package. The free version includes over 1,000 icons and the paid package has over 5,000 icons including different style variations. You can browse the available free icons in the gallery of free solid icons

Place files in webroot

You will need to put at a minimum the proper CSS files and webfont file in the public webroot of your web application. The solid icons are free and the only ones I am going to use in this example. The required files are fontawesome.min.css, solid.min.css, and fa-solid-900.woff.

In this example, the css will go in css/ and the font in webfonts/.

The CSS directory is not required to be named css/ and is not required to go in the root of your public directory, but the webfonts must go in a directory named webfonts/ that lives next to the directory containing your CSS files because the CSS files reference the webfonts directory with ../webfonts/. For example, you could put the CSS in fontawesome/stylesheets/ and the webfonts in fontawesome/webfonts/.

For example, my public webroot directory looks like this:

css/fontawesome.min.css
css/solid.min.css
webfonts/fa-solid-900.woff

For maximum compatibility across browsers and devices, you might want to copy over all of the fa-solid-900.* fonts including the .ttf, .woff2, .eot, and .svg formats, but technically you only need one that works. The .woff and .ttf formats are the most widely supported.

Link the stylesheets

In the <head> of your web page, include a link to the CSS files needed. At minimum you need the fontawesome and icon stylesheets like this:

<html>

<head>
    <link href="/css/fontawesome.min.css" rel="stylesheet">
    <link href="/css/solid.min.css" rel="stylesheet">
</head>

<body>
</body>

</html>

Use the icons

To see which icons are available, browse the gallery of free solid icons on the official webpage or view the available styles in fontawesome.css.

Here is an example of how to use the an icon with a span element:

<span class="fas fa-delete"></span>

You can adjust the size by modifying the font-size style. Use percentages or em to modify the relative size.

<span class="fas fa-delete" style="font-size: 150%;"></span>
<span class="fas fa-delete" style="font-size: 1.5em;"></span>

To make a link, just drop the span inside the anchor:

<a href="/"><span class="fas fa-home"></span></a>

Conclusion

After reading this you should be able to install and self-host the free icon pack from Font Awesome to use icons in your web page.