<h1>
    Glyphs
</h1>
<p>
    The C1 MVC CSS includes several glyphs defined
    as pure CSS.
    The glyphs are used by the C1 MVC controls and extensions,
    and your applications may also use them.
</p>
<p>
    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.
</p>
<p>
    To use C1 MVC glyphs in your applications, add a span
    element to your markup and set its class to the glyph
    name. For example:
</p>

<pre>&lt;span class="<b>wj-glyph-diamond</b>"&gt;&lt;/span&gt;</pre>

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

<pre>/* hide the pencil glyph in FlexGrid controls */
.wj-flexgrid .wj-glyph-pencil {
    display: none;
}</pre>

<pre>/* 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;
    }</pre>

<p>
    The table below shows the glyphs defined in the
    C1 MVC CSS:
</p>

<table class="table table-condensed">
    <thead>
        <tr>
            <th>Name</th>
            <th>Glyph</th>
            <th>Markup</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>