Icons

List of available icons in the system.

Components

• Blade Components
• Code Block
• Frame Navigation
• Grid
• Content
• Slide Up Down
• Margins and paddings
• Icons

List of the icons

HTML:

An example is how to display an icon:

<i class="icon icon-iconname"></i>

Customization

Stylus:

If you need to display an icon inside the styles, you can use the icon() function, in which you need to specify icon(iconname, fontsize in px, before / after). The last 2 parameters ​​are optional (Default icon size is 1rem, default position is :before).

.block
    icon(logo, 14px, before)

.block2
    icon(logout, 15px, after)

.block3
    icon(login, 15px)

.block4
    icon(list)

Icon's code

Each icon generates its own symbol code, which you can use in regular CSS. If you go to the resources/svg folder, you can see it in the name of the icon. When adding a new icon, you need to manually register it before the name of the icon. For example: uEA12-clipboard.svg, where clipboard is the name of the icon, and uEA12 is its character code. Example of using symol code:

.icon {
    display: inline-block;
    text-rendering: auto;
    font: normal normal 400 14px/1 icons;
    font-size: inherit;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.icon-clipboard::before {
    content: "\ea12";
}

Gulp task

If the .icon class intersects with the classes in your system, you can replace it in gulpfile.js, which is in the root of the project.

gulp.task('build:icons', function(){
    return gulp.src('./resources/svg/*.svg')
        .pipe(iconfont({
            fontName: 'icons',
            fontHeight: 1000,
            prependUnicode: true,
            formats: ['ttf', 'eot', 'woff'],
            normalize: true,
            timestamp: runTimestamp
        }))
        .on('glyphs', function(glyphs, options) {
            gulp.src('./resources/svg/template/icons.styl')
                .pipe( consolidate('lodash', {
                    glyphs: glyphs,
                    fontName: options.fontName,
                    fontPath: '../fonts/', 
                    className: 'icon'
                }) )
                .pipe( gulp.dest('./resources/css/framework/') )
        })
    .pipe(gulp.dest('./dist/fonts/'));
})