💡
Note that Thin , Light and Duotone icons are available in the paid PRO plans of Font Awesome.
3. **Specialized Use Cases**:
* Font Awesome includes icons specifically designed for certain scenarios (e.g., payment methods, medical symbols, etc.).
* When building applications, you might encounter unique requirements where Font Awesome icons are a better fit. Having access to both libraries allows you to address these specialized use cases effectively.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702886514686/49ab9fc4-a0fc-4bcf-a18d-aa7daf613679.png align="center")
## Installation
1. Download the latest Font Awesome for Web
[https://fontawesome.com/download](https://fontawesome.com/download)
2. Extract to a local folder. Should end up with something like this:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686293306371/9cb01002-d3bf-4cbd-ac78-959c31c901a4.png align="left")
3. Open the `less/_variables.less` file for editing. Change the variable below and save.
```less
// put whatever prefix you want instead of fa6.
// The original prefix was fa
@fa-css-prefix : fa6;
// change the path if you will have both the CSS
// and font files in the same folder in APEX
// The original path was ../webfonts which means that
// you had to have a webfonts folder in APEX at the same level
// as the folder with the CSS files
@fa-font-path : "";
```
4. Open a Command Prompt or Terminal on Mac. Depending on the operating system, make sure `less` is installed. For MacOS, use the following command:
```bash
sudo npm install less -g
```
5. Open the terminal window in the Font Awesome `less` folder.
6. Run the following commands to compile the `fontawesome.less` , `brands.less` , etc. files:
```bash
lessc fontawesome.less fontawesome.css
lessc brands.less brands.css
lessc regular.less regular.css
lessc solid.less solid.css
```
This will create new CSS files in the folder - `fontawesome.css`, `brands.css`, etc.
7. In APEX, in Static Application files or Static Workspace files, upload the new CSS files to a new folder, mine was named `fa6`. So now you should have these two files as follows:
`#APP_FILES#fa6/fontawesome.css`
`#APP_FILES#fa6/brands.css`
8. In the same folder in Static Application files or Static Workspace files, add the font files located on your local machine in the folder webfonts - `fa-brands-400.ttf` , `fa-brands-400.woff2` , etc.
9. You should now have the following too:
`#APP_FILES#fa6/fa-brands-400.ttf`
`#APP_FILES#fa6/fa-brands-400.woff2`
`etc.`
10. In your APEX application, go to Shared Components. Add the path to the CSS files in `Application Definition` / `User Interface` / `CSS`.
11. Use the new icons! Here is an example:
```xml