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-image:url('../images/my-pencil.png');
    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: