jsGlyph (font-family: jsglyphregular;)

As of jsPanel version 2.2.0 a small iconfont is included. The primary idea was to get rid of the old icon sprite for the controls in the header section. Currently jsGlyph has only a very basic set of glyphs. But from time to time I plan to add more glyphs.

The following glyphs are currently available in jsGlyph:













































































































































































How to use:

  1. Upload the jsGlyph iconfont to your website (Already done if you uploaded the complete jsPanel folder)

  2. Include necessary CSS (Already done if you included jquery.jspanel.css)

    // load iconfont using @font-face in your css file
    @font-face {
        font-family: 'jsglyphregular';
        src: url('fonts/jsglyph.eot');
        src: url('fonts/jsglyph.eot?#iefix') format('embedded-opentype'),
             url('fonts/jsglyph.woff2') format('woff2'),
             url('fonts/jsglyph.woff') format('woff'),
             url('fonts/jsglyph.ttf') format('truetype'),
             url('fonts/jsglyph.svg#jsglyphregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    
  3. Modify your style sheet (not necessary if you included jquery.jspanel.css)

    // assign the font-family to appropriate elements ...
    .jsglyph{ font-family: "jsglyphregular"; }
    
    // add css rules as needed ...
    .jsglyph-remove:before{ content: "\e007"; } /* unicode  */
    .jsglyph-minimize:before{ content: "\e001"; }
    .jsglyph-maximize:before{ content: "\e002"; }
    .jsglyph-chevron-up:before{ content: "\e003"; }
    .jsglyph-chevron-down:before{ content: "\e004"; }
    .jsglyph-normalize:before{ content: "\e005"; }
    .jsglyph-circle2-exclamationmark:before{ content:"\e02c"; }
    
  4. Use class names or inline styles with unicode encodings:

    <span class="jsglyph jsglyph-minimize"></span>
    // or
    <span style="font-family: 'jsglyphregular';">&#xe001;</span>
    

    Results in:


bootstrap glyphicons

Bootstrap comes with a subset of the original Glyphicons. So you already have about 2oo icons available when using bootstrap.

For the use of jsPanel with bootstrap refer to the API of: option.bootstrap and option.controls

For detailed information about the bootstrap glyphicons refer to bootstrap components


font-awesome iconfont

For the use of jsPanel with the font-awesome iconfont refer to the API of: option.controls

For detailed information about the font-awesome iconfont refer to font-awesome


more resources