• 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

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, hover over it and click on the bottom half of the icon that has an “eye” symbol over it (when you hover over the icon, there are 2 clickable parts: 1 on the top, the other on the bottom ).  This will take you to the icon page.
  • Once on the icon page, click on the SVG button to download the SVG.
  • Open the SVG file in a text editor.
  • The text should look something like this:
  • Delete the line that is a comment and starts with: <!– Generator:
  • 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!