Geo Tutorial: Using Custom Icon Fonts for Map Symbology
/
This is a follow-up piece to Steve Grieb’s excellent article, Dynamic Custom Labeling with ArcGIS for JavaScript and FontAwesome. If you haven’t read that yet, head on over to the ESRI GeoNet forum and check it out.
Awesome Fonts
We all love icon fonts. FontAwesome, Glyphicons, and many others provide users with huge libraries of iconography – for FREE! Using an icon font over standard bitmap graphics is enormously beneficial for both the performance of your app and its flexibility. Need to make an icon that’s 400px wide? Done. Want to change the color on the fly using CSS? Done. Want the ability to do that with hundreds if icons? Did I mention it’s free?!
For general utility and ease of use, you won’t find a better package than a prefab icon font, but what about those times when you need custom icons?
Build Your Own
Fontastic lets you create your own custom icon font
When working on Fishidy’s map symbology earlier this year, we needed custom specialized icons that matched the brand. Just try and find a font with an icon for underwater structure. So we turned to Fontastic. Fontastic is a free online font builder that allows you to upload SVGs and turn them into fonts. What’s better, Fontastic automatically creates a stylesheet in addition to the font so you can easily add your icons anywhere in your code.
To build your font, you’re going to need vector artwork, so fire-up Illustrator and start designing. If you’re working on a large library of icons, you may be wondering if you have to export every single icon individually to SVG. The bad news is yes you do. The good news is there’s a trick to making it go faster.
Tips and Tricks
First-off, don’t store your icons in separate files, create a single library file with every icon you want to use in the font. Then, create a new artboard for each icon that matches the exact outer dimensions of the artwork. The icon should be as big as possible inside of its corresponding artboard. Also, don’t forget to label each artboard with the name of the icon. Once your collection is ready, it’s time to export.
When exporting, make sure to select SVG as the output format, and then check the box called “Use Artboards.” Also make sure the “All” radio button is selected. Unfortunately, you won’t be able to export the icons with only the artboard name, so we recommend entering your company name, or the project name, in the file name text box. This will create files that look like this: [company/project name]_[icon name].svg. In our case it would look like: Fishidy_UnderwaterStructure.svg. When you’re ready to export, press Save.
Follow the SVG export settings listed on the Fontastic site, and that’s it! You have now saved your entire font library as SVGs without doing it one-by-one, and they’re ready to be imported into Fontastic. When you want to add another icon, or modify an existing one, make your edits to your library file and then re-save using the process above. It will create all of the icons in the folder of your choosing, but you can just locate the icon you’re looking for and delete the rest if needed.
Adding the Font to ArcGIS
Export the library from FontAwesome using the class mapping setting, and then follow Steve Grieb’s tutorial on creating an icon picker in AngularJS to get them into your application. Voilà – a custom, scalable, extensible, and easy-to-maintain icon library right at your fingertips.
