Glyphs

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.

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 C1 MVC glyphs in your applications, add a span 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 C1 MVC 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 C1 MVC CSS:

Name	Glyph	Markup
asterisk		`<span class="wj-glyph-asterisk"></span>`
calendar		`<span class="wj-glyph-calendar"></span>`
check		`<span class="wj-glyph-check"></span>`
circle		`<span class="wj-glyph-circle"></span>`
clock		`<span class="wj-glyph-clock"></span>`
diamond		`<span class="wj-glyph-diamond"></span>`
down		`<span class="wj-glyph-down"></span>`
down-left		`<span class="wj-glyph-down-left"></span>`
down-right		`<span class="wj-glyph-down-right"></span>`
file		`<span class="wj-glyph-file"></span>`
filter		`<span class="wj-glyph-filter"></span>`
left		`<span class="wj-glyph-left"></span>`
minus		`<span class="wj-glyph-minus"></span>`
pencil		`<span class="wj-glyph-pencil"></span>`
plus		`<span class="wj-glyph-plus"></span>`
right		`<span class="wj-glyph-right"></span>`
square		`<span class="wj-glyph-square"></span>`
step-backward		`<span class="wj-glyph-step-backward"></span>`
step-forward		`<span class="wj-glyph-step-forward"></span>`
up		`<span class="wj-glyph-up"></span>`
up-left		`<span class="wj-glyph-up-left"></span>`
up-right		`<span class="wj-glyph-up-right"></span>`

// This file locates: "Scripts/Lesson/C1Mvc/Glyphs.js".
c1.documentReady(function () {
    var glyphs = 'asterisk,calendar,check,circle,clock,diamond,down,' +
        'down-left,down-right,file,filter,left,minus,pencil,plus,right,' +
        'square,step-backward,step-forward,up,up-left,up-right';
 
    var rowTemplate = '<tr>' +
        '<td>{glyph}</td>' +
        '<td style="font-size:125%;"><span class="wj-glyph-{glyph}"></span></td>' +
        '<td><code>&lt;span class="wj-glyph-{glyph}"&gt;&lt;/span&gt;</code></td>' +
      '</tr>';
 
    var tbody = '';
    glyphs.split(',').forEach(function (item, index) {
        tbody += rowTemplate.replace(/\{glyph\}/g, item);
    });
    document.querySelector('tbody').innerHTML = tbody;
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: Glyphs
        public ActionResult Glyphs()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Mvc.Glyphs_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.Glyphs_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Glyphs_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.Glyphs_Text3)
</p>
 
<pre>&lt;span class="<b>wj-glyph-diamond</b>"&gt;&lt;/span&gt;</pre>
 
<p>
    @Html.Raw(Resources.C1Mvc.Glyphs_Text4)
</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>
    @Html.Raw(Resources.C1Mvc.Glyphs_Text5)
</p>
 
<table class="table table-condensed">
    <thead>
        <tr>
            <th>Name</th>
            <th>Glyph</th>
            <th>Markup</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>