How to Use Font Awesome as SVG Icons in FileMaker Buttons

Articles, Quick Tips

FileMaker Quick Tip
  • 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.

Problem

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.

Solution

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!

Happy FileMaking!