You have a subscription to Font Awesome’s pro plan: Font Awesome.
You are planning to use Font Awesome <i class="fa fa-unicorn"></i> tags to render the icons.
When you are done, you’ll be able to add Font Awesome icons anywhere in your Retool apps where you can add HTML, like in text components and inside tables.
Create a public bucket on Amazon S3, Google Cloud Services, or similar provider.
Host the font files in a publicly accessible folder.
Open up the all.css file from the the /css folder that you downloaded from FA.
Change the @font-face declarations to use the absolute paths to the publicly hosted font files in your S3 bucket instead of the provided relative paths [1].
Copy and paste this entire CSS file into the Preloaded CSS section in the settings/advanced page of your Retool account.
Use the style tags in your Retool app to display Font Awesome icons!
Footnote
[1]
For example, you’ll change the following relative path: src: url("../webfonts/fa-brands-400.eot")
To the absolute path to your publicly hosted file: src: url("https://your-bucket-name.s3-us-west-1.amazonaws.com/font-awesome/webfonts/fa-brands-400.eot");
Tip: To remove the tedium of the this step, you can do a find & replace for ../webfonts/ and replace it with the first part of the absolute path to your files. In the above example, it would be a find & replace for ../webfonts/ with https://your-bucket-name.s3.amazonaws.com/font-awesome/webfonts/.
In case anyone else finds this guide and dismisses because they don’t have a Pro plan… these steps also work with the free version of Font Awesome. Just download the self-hosted version.
For anyone who may be looking for this in the future, as an alternative, you are now able to add the following line to your “Preloaded CSS” under Advanced Settings, to use a CDN hosted version of FontAwesome 5.
Just to expand on this solution: this is limited to components that take markdown, as Alex mentioned. So this wont work inside buttons or mapped menu items (like in navbars and dropdowns), nor do the icons get added to our icon list.
To use them as icons, a text component gives you the most flexibility at the moment. For example, you would paste this: <i class="fa-solid fa-car"></i> in a text component, and then you can play with the height, margin, image width, alignment to get the positioning the way you like. Placing multiple components in a stack can also help with positioning. Additionally, the font size will change the icon size.
