This guide assumes:
- You have some knowledge of HTML & CSS.
- 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 intextcomponents and insidetables.
Steps
- Login to your FA account and download the Font Awesome package from the Get Started instantly With 1,000+ Free Icons | Font Awesome page.
- 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/.
