📖 Font Awesome Icons

Font Awesome is a fun library of icons (https://fontawesome.com/search?o=r&m=free&s=solid&f=classic) available for free to web developers for use in web pages. These are fun icons that add a visual element to plain text especially useful with lists, links and menus. They are designed to take on the size and color of the element they are nested.

Font Awesome has an extensive library designed for professional use with many attributes and options. We will only be using the free version and the simplest implementation. Buying any of the products at Font Awesome is completely optional and is not required for this class.

Download the Font Awesome Library

Begin by going to the Font Awesome web site to review their product offerings and the technical docs. From there, you can follow the "Start for Free" link but beware that there are still a couple of ways to access the library. FA wants you to provide your email to acquire a free kit, but this is not necessary. The kit allows for some customization, but these are not needed for our purposes. What I want you to do is to download the FA library from https://fontawesome.com/download. You can select the latest version of the library. Look for the "Free For Web" button.

Unzip the Folder

Once you have downloaded the library, you will need to unzip the folder. We won't need all of the files for our project. Most of the files are for the Pro version anyway. We only need the 'Brands' and 'Solid' styles that come with the free plan.

Add the Files to Your Project

Find and copy the webfonts folder from the fontawesome-free-[ver]-web folder into your project folder. If you have already added a fonts folder to your project to hold external web fonts, you might consider placing the Font Awesome webfonts folder there. You will also need to copy at least 2 of the Font Awesome CSS files (fontawesome.css and brands.css or solid.css) from the fontawesome-free-[ver]-web folder to your project. You should place these files in the project CSS folder with your other CSS files. Font Awesome offers some help in their dev docs online at https://fontawesome.com/docs/web/setup/host-yourself/webfonts.

Add links to the Font Awesome library in the head section of your project files (web pages). For each page you want to use the Font Awesome icons, you need to add the links to the library then use the < i > tags with references to the font icons you want to display. You can find help setting up your HTML in the https://fontawesome.com/docs/web/add-icons/how-to page.

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

<body>
    <ul>
        <li><a href="index.html"><i class="fa-solid fa-home"></i> Home</a></li>
        <li><a href="faq.html"><i class="fa-solid fa-question"></i> FAQs</a></li>
        <li><a href="about.html"><i class="fa-solid fa-user"></i> About Us</a></li>
    </ul>
</body>

You can see an example of my use of these Awesome Icons at https://2learnweb.brookhavencollege.edu/profherd/web/examples/index.html.