Jump to: navigation, search

Changes


Icon Font

784 bytes added, 12:35, 24 September 2020
Added a section describing how to create icons, as I had a hard time remembering the process - REP.
The process for creating icons is documented here.
===Step 01: Asset creationCreation===
The first step is to find similar, open-source icons to tweak. [https://themes-pixeden.com/font-demos/7-stroke/ Pixeden], [https://lineicons.com/icons/ LineIcons], or [https://linea.io/ LineA], are good starting points, as they have a similar style.
* Add as many tags as desired using the # as separators. For example, a check mark icon may be listed as #ok#confirm#check. The - ends the tag portion of the syntax.
* The glyph code assigns the icon to a certain space on the character map. As different device vendors block different glyph code sets for different uses, it is good practice to overwrite the basic alphabet, numbers, and symbols, to ensure the icons work on a large range of devices. Starting from 21, glyph codes may use numbers, or letters from 2A (2 here being an example) to 2F.
 
===Step 02: TTF Generation===
[https://icomoon.io/app/ IcoMoon] is a useful online tool for generating the icon font, that can then be installed on a device or packaged into the client resources.
 
* Import Icons (top left) - Use this button to import an already existing font file, when creating additions, for example.
* On the Selection tab (bottom center), ensure that the desired set is fully selected, and shown with an orange outline.
* On the Generate Font tab (bottom right), double check the generated tags for the icons. The settings button beside the download button allows you to edit the font file name and version.
* The download button exports the .ttf, among other resources, in a .ZIP, that is then downloaded.
 
[[Category:Pages with broken file links|Icon Font]]
==Usage==
487
edits