Add font-awesome to a Radicle Roots website using composer

Table of content

# Prerequisites
# Installations
# Composer dependencies
# Yarn dependencies
# Implementation
# Usage

This step-by-step guide walks you through the installation of required dependencies, proper JavaScript integration, and best practices for using Font Awesome icons in your project.

Prerequisites

Be comfortable using the Terminal
Basic knowledge of JavaScript
Having a Radicle Roots installation ready

Installations

Composer dependencies

Most of the installations are done using the `composer require` command.

First we install the `font-awesome` plugin using composer:

composer require wpackagist-plugin/font-awesome

Be sure to also activate it from the plugins page.

Yarn dependencies

Install the following dependencies:

yarn add @fortawesome/fontawesome-svg-core

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Implementation

Create a new JavaScript file within the `resources/js/vendor/` folder called `fontawesome.js` and add the following contents:

import { library, dom } from '@fortawesome/fontawesome-svg-core';

import { fas } from '@fortawesome/free-solid-svg-icons'; 
import { far } from '@fortawesome/free-regular-svg-icons'; 
import { fab } from '@fortawesome/free-brands-svg-icons';

export default() {
    library.add(fas, far, fab);
    dom.watch();
}

Open the `common.js` file and import the `fontawesome.js` file so it actually runs the script.

Usage

When using font-awesome icons, it’s usual to use the `<i>` tag and add the font-awesome class to the `class` attribute, for example:

<i class="fa fa-arrow-left-long"></i>