Open MCT Style Guide
Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.
New glyphs can be added if needed. Take care to observe the following guidelines:
The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a psuedo :before HTML element to whatever element it's attached to that makes proper use of the symbols font.
Alternately, you can use the .ui-symbol class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.
Glyphs suitable for denoting general user interface verbs and nouns.
| Class | .{{glyph.cssClass}} |
| Meaning | {{glyph.meaning}} |
| CSS Content | \{{glyph.cssContent}} |
| HTML Entity | {{glyph.htmlEntity}} |
Glyphs created for use in various controls.
| Class | .{{glyph.cssClass}} |
| Meaning | {{glyph.meaning}} |
| CSS Content | \{{glyph.cssContent}} |
| HTML Entity | {{glyph.htmlEntity}} |
These glyphs are reserved exclusively to denote types of objects in the application. Only use them if you are referring to a pre-existing object type.
| Class | .{{glyph.cssClass}} |
| Meaning | {{glyph.meaning}} |
| CSS Content | \{{glyph.cssContent}} |
| HTML Entity | {{glyph.htmlEntity}} |