LMD-Tools Font Image List Guide
Custom fonts can be created via third-party applications or web services. TLMDFontCollection component is able to load zip files produces by IcoMoon or Fontello web applications directly. The component extracts code-point list along with code-point names from the contained JSON description.
Custom font creation allow to mix icons from different other fonts, modify icons or even introduce fully custom icons. It also allows to include icons, which are really needed by the application, thus, minimizing resources size.
Following is a simple tutorial showing how to create a custom font. Open IcoMoon web application using this link: https://icomoon.io/app. Use the search box to search for some icon, for example:
Choose the icon you liked from search results and press the little add button, which will appear in the search box:
The icon has been added to the project's icons. Let's repeat above steps to add more icons, for example:
Now, we can set the same base size for all icons. Let's stick with 16x16 size:
Icons are ready to be exported as a font. Navigate to the Font section using the bottom bar:
Set meaningful names for symbol code-points. As well, we can change the font name. The name of the font is important, because we use it to reference the font from the font image list component. Font name along with other font attributes can be changed in the dialog, which can be shown clicking on Preferences button at the top.
Finally, press the Download button at the bottom navigation bar. That's all. Created custom font will be downloaded as a *.zip file, which can be directly loaded by the font collection component, as described here.
Suppose, we are not fully satisfied with one or more icons. For example, the items icon is too bold compared to the other icons in a set. To change the icon, switch to the Edit tool at the top and click on the icon:
Icon edit dialog will be shown. Click on the Download (SVG) button to download icon in SVG format for editing:
Now, open and adjust SVG file in a vector graphic editor. Following is an example of the icon, modified in Inkscape. The way we modified the icon in Inkscape is not in scope of this tutorial, but generally, you need to double-click the drawing to activate shape editing mode, and then repeatedly select and drag anchor points to their new positions.
After modification, we can simply drag the icon file back to the IcoMoon icon edit dialog:
Finally, the icon looks more consistent with the neighboring icons:
After modification and loading the font into TLMDFontCollection, the icons looks like this. As can be seen the code-point list along with code-point names was successfully imported as a part of *.zip font file.