(Showing Draft Content)

Wijmo Glyphs

The wijmo.css file includes several glyphs defined as pure CSS. The glyphs are used by the Wijmo controls and extensions, and your applications may also use them.

Using CSS to define glyphs eliminates the need to deploy extra font or image files, and ensures the images are rendered using the foreground color and font size defined by the current theme.

To use Wijmo glyphs in your applications, add a element to your markup and set its class to the glyph name. For example:

<span class="wj-glyph-diamond"></span>

You can use CSS to customize the appearance of the glyphs used in the Wijmo controls. For example, you could use the CSS below to hide or modify the appearance of the pencil glyph used by the FlexGrid to indicate rows in edit mode:

/* hide the pencil glyph in FlexGrid controls */
.wj-flexgrid .wj-glyph-pencil {
    display: none;
/* replace the pencil glyph in FlexGrid controls with a custom image */
.wj-flexgrid .wj-glyph-pencil {
    background-repeat: round;
    border: 0;
    opacity: 1;

.wj-flexgrid .wj-glyph-pencil:after {
    display: none;

The table below shows the glyphs defined in the wijmo.css file:

Name Glyph CSS Class
asterisk wj-glyph-asterisk
calendar wj-glyph-calendar
check wj-glyph-check
circle wj-glyph-circle
clipboard wj-glyph-clipboard
clock wj-glyph-clock
diamond wj-glyph-diamond
dimension wj-glyph-dimension
down wj-glyph-down
down-left wj-glyph-down-left
down-right wj-glyph-down-right
drag wj-glyph-drag
file wj-glyph-file
filter wj-glyph-filter
left wj-glyph-left
measure wj-glyph-measure
minus wj-glyph-minus
pencil wj-glyph-pencil
pin wj-glyph-pin
plus wj-glyph-plus
right wj-glyph-right
square wj-glyph-square
step-backward wj-glyph-step-backward
step-forward wj-glyph-step-forward
up wj-glyph-up
up-left wj-glyph-up-left
up-right wj-glyph-up-right