# Font Awesome and Icon Picker Integration

We've integrated Font Awesome into our project. For content management, we utilize the IconPicker library to select Font Awesome icons within our backoffice.

- [Font Awesome](https://fontawesome.com/)
- [IconPicker (Modified by us and no longer maintained)](https://github.com/furcan/IconPicker)

**Versions:**
- Font Awesome: `6.4.2`
- IconPicker: `1.5.0`

## Hosting Font Awesome

Font Awesome is hosted on our production server and is protected by a Cloudflare proxy.

**Updating Font Awesome:**
1. Import the latest version to the Virgo server at `/var/www/html/webinars/httpdocs/k4econgress-static-assets/`.
2. Use the [deploy-rsync.php](../../deploy-rsync.php) script to synchronize it with the production servers. If you lack access, please consult the project leader.

## Context

The Font Awesome library provides a JSON file containing metadata about its icons at `Downloads/fontawesome-pro-6.4.2-web/fontawesome-pro-6.4.2-web/metadata/icons.json`. Meanwhile, the IconPicker library uses a JSON file with key/value pairs representing Font Awesome icon names.

To keep up with the latest version of Font Awesome, we had to:
- Modify the IconPicker library to accommodate the new Font Awesome JSON import structure.
- Develop a PHP script to reduce the size of the `icons.json` file, which is approximately 31MB.

## Update Procedure

1. Download the latest version of Font Awesome from [here](https://fontawesome.com/download).
2. Extract `Downloads/fontawesome-pro-6.4.2-web/metadata/icons.json` to `./js/icon-picker/`.
3. Execute the command: `php ./js/icon-picker/fontawesome-import.php`.
4. Copy the content from the newly generated file `./js/icon-picker/icons-lib.json`.
5. Replace the old JSON content in the JS library at `./js/icon-picker/dist/iconpicker-1.5.0.js` with the copied content.


## Style Import in HTML

With the updated version of Font Awesome, it's essential to ensure that the styles are correctly imported into your HTML. This ensures that the icons display as intended without any glitches.

### Updating `src/common/header_js_require.inc.php`

To integrate the new styles, follow these steps:

1. **Locate the File**: Navigate to `src/common/header_js_require.inc.php` in your project directory.

2. **Edit the File**: Open the file in your preferred code editor.

3. **Update the Link Tag**: Search for any existing Font Awesome link tags. They might look something like this:
   ```html
   <link rel="stylesheet" href="path_to_previous_version/fontawesome.css">
   ```
   Replace the `href` value with the path to the new version of Font Awesome:
   ```html
   <link rel="stylesheet" href="path_to_new_version/fontawesome-pro-6.4.2-web/css/all.css">
   ```

4. **Save and Close**: After making the changes, save the file and close your editor.

5. **Test**: Always ensure to test the changes in a local development environment before pushing to production. Load a page that uses Font Awesome icons and verify that they display correctly.