- Who: Anyone who wants to use Font Awesome as SVG icons in FileMaker buttons
- What: How to Use Font Awesome as SVG Icons in FileMaker buttons
- With: FileMaker Server 14+ (not tested on earlier versions)
- Why: Font Awesome is a common and useful set of icons.
Whether you’re trying to match a web based design in FileMaker or you simply like one of the many great Font Awesome icons, using those icons in FileMaker as SVG icons compatible with the button bar/etc. isn’t necessarily a straight forward process.
Fortunately, there is an easy way! You can find all the Font Awesome icons converted to SVG at the web site: https://www.flaticon.com/packs/font-awesome
(NOTE: as of 06/15/2022 SVGs from this site are now only available with a premium subscription. I will leave this guide here for people who want to convert any SVGs, not just the ones form this site.)
With a few simple tweaks, we can use these converted SVGs in FileMaker!
- Go to: https://www.flaticon.com/packs/font-awesome
- In the lower search/filter field (there is one large search field at the top of the web page, and another smaller search/filter field just above the Font Awesome icons), look for the Font Awesome icon by name or description. For example, the Font Awesome icon that looks like 3 gears is called the “Settings” icon. You can find it by either searching for “settings” or by searching for “gear”.
- When you find the icon you want, click on it to take you to the icon details page.
- Once on the icon details page, click on the SVG button to download the SVG.
- Open the SVG file in a text editor.
- If it exists, delete the line that is a comment and starts with: <!– Generator:
- If it exists, delete the DOCTYPE line that starts with: <!DOCTYPE svg PUBLIC
- In order for FileMaker to manage the color of the SVG icon including within themes, within the first <g> tag add the FileMaker specific class “fm_fill” so that it looks like this: <g class=”fm_fill”>
- At the end of each <path d= tag, remove the fill attribute. If your download SVG was white, you would be removing the attribute that looks like this: fill=”#FFFFFF”. If your <path d tag does not have a fill, you can ignore this part.
- Your final file should look something like this (note that due to space limitations we do not see all the code here, but at least we see the header section, <g class=”fm_fill”> tag, and the end of the <path> tags without the fill attribute):
- At this point, the SVG icon is ready to be imported! The easiest way to add it to FileMaker is to create a new button or button bar, and at the bottom of the icon section click the plus sign and simply choose your new SVG:
Now we have access to all the great Font Awesome icons with FileMaker itself!