Touch UI has a long history. The framework was introduced in December of 2013. It was built on top of jQuery Mobile and represented our attempt to provide a “mobile” presentation style for apps created with Code On Time.
Here is the sample screenshot from that time:
The graphics of jQuery Mobile were based on a small subset of Glyphicons that was contributed by the namesake company in the SVG format. The extended set of 250 icons found their way into Bootstrap 3.0. We have integrated Bootstrap to provide the means of creating the content pages in Touch UI and promptly upgraded the framework to use the corresponding web font.
Glyphicons continued to be a part of Touch UI framework up until now.
Touch UI of today gets its looks from the Material Icons library and can be extended with an additional icon set when needed. The new framework works equally well on the devices driven by mouse and touch. It supports modern web browsers on any screen size. It can operate in native mode and as a part of a Progressive Web App.
Starting with the release 8.9.18.0 the glyphicons are not the standard component of Touch UI. New projects will not have these icons included. The legacy apps will retain the font in the ~/app/fonts folder but will require one of the following after being re-generated with the new release:
- Replacing the references to the glyphicons with their counterparts found in the Material Icons library.
- Copying of the single CSS file from the code generation library into your own project.
The replacement of icons is simple. Here is how we did that for a few icons found in the current iteration of https://my.codeontime.com.
Either keep the span element of the icon definition or have it replaced with i tag. Replace the CSS classes in the icon definition with a single class material-icon. Enter the icon name between the opening and closing tag.
If you prefer to continue using the glyphicons, then copy and paste the glyphicons.css file from the code generation library in [Code OnTime]/Library/Legacy/glyphicons folder into ~/app/css folder of your application. Run the app generator and click the “Locate” link below the list of projects to go straight to the library folder.
If you want to start using the glyphicons in the new projects then copy the other two files in the same folder and paste into the ~/app/fonts folder of your application.
Glyphicons are not widely used in the apps created with Code On Time. You may find the references to the icons in the dedicated login page of the app or in the content pages based on the bootstrap. The new code generation library is now referencing the material icons instead. This reduces significantly the size of the framework CSS files and provides a faster first paint in the browsers and web views.
The content pages of the near future will be based on Display Flow technology. The new presentation technology is shared with the Kiosk UI and will have its own Live Visual Designer. You will see it in action in the new community forum and in the support help desk. Materials Icons are integrated in the Display Flow and provide an excellent replacement for the Glyphicons.