LMD-Tools Font Image List Guide


Creating Custom Font


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.

 

IcoMoon tutorial

 

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:

 

clip0037

 

Choose the icon you liked from search results and press the little add button, which will appear in the search box:

 

clip0038

 

clip0039

 

The icon has been added to the project's icons. Let's repeat above steps to add more icons, for example:

 

clip0040

 

Now, we can set the same base size for all icons. Let's stick with 16x16 size:

 

clip0041

 

Icons are ready to be exported as a font. Navigate to the Font section using the bottom bar:

 

clip0042

 

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.

 

clip0043

 

clip0044

 

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.

 

clip0045

 

Modifying icons

 

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:

 

clip0046

 

Icon edit dialog will be shown. Click on the Download (SVG) button to download icon in SVG format for editing:

 

clip0047

 

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.

 

clip0048

 

After modification, we can simply drag the icon file back to the IcoMoon icon edit dialog:

 

clip0049

 

Finally, the icon looks more consistent with the neighboring icons:

 

clip0050

 

Final result

 

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.

 

clip0051   clip0052