SCSS Configurations

Important

Please note in order to change template configurations through config.scss file, you must have knowledge of SASS compilation. A SASS compiler must be installed and running in order to save the changes in .scss file. If you need any support regarding this, please contact us.

If you want to change the configurations for the template you can do it just by changing values in config.scss file.

Location: lib/scss/config.scss

Icons

Bird uses SCSS Icons map for easy use of icons in CSS. No need to remember those confusing content values for icons, just use icon-css-name to use icons.

1. Icons Map

Line no: 88

// Icons Map
$icons: (
    blank                                               : "",
    search                                              : "\e98e",
    caret                                               : "\e9c5",
    alert                                               : "\e647",
    alert-primary                                       : "\ee73",
    alert-danger                                        : '\ed64',
    alert-warning                                       : '\e9bd',
    alert-info                                          : '\e9b9',
    alert-success                                       : '\ed6e',
    arrow-left                                          : "\e9c4",
    arrow-right                                         : "\e9c7",
    arrow-up                                            : "\e9c6",
    arrow-down                                          : "\e9c5",
    arrow-left-double                                   : "\e9c0",
    arrow-right-double                                  : "\e9c3",
    collapse                                            : '\e9c9',
    reload                                              : '\e9fb',
    move                                                : '\e986',
    modal                                               : "\eec8",
    dropdown                                            : "\ec6e",
    close                                               : "\ed6a",
    copy                                                : "\ea34",
    csv                                                 : "\ea1a",
    print                                               : "\eab7",
    pdf                                                 : "\ef36",
    excel                                               : "\ef39",
    group-expand                                        : "\ed5e",
    group-collapse                                      : "\ed5f",
    home                                                : "\e603",
    subtitle                                            : "\ee03",
    checker                                             : "\ed6c",
    switch                                              : "\ec68",
    tick                                                : "\e372",
    arrow-left-1                                        : "\edd7",
    arrow-right-1                                       : "\edd3",
    removed                                             : "\e9e7",
    added                                               : "\e9e4",
    unselected                                          : "\ee70",
    selected                                            : "\ee76",
    star                                                : "\ece2",

    // Your icons goes here

) !global;
To add new icon in the map:
  1. Simply add new icon name and value in the last line of map
  2. SAVE the file and compile it to CSS

YOUR_ICON_NAME                                          : "YOUR_ICON_CONTENT_VALUE",
How to use icons in CSS
  1. Simply use new icon name in the SCSS mixin
  2. SAVE the file and compile it to CSS

@include icon(after, YOUR_ICON_NAME);

2. Icon sizes

Line no: 153

// Icon sizes
$icon-base                                              :16px !global;
$icon-xlg                                               :ceil(($icon-base * 1.60)) !global;  // 26px
$icon-lg                                                :ceil(($icon-base * 1.40)) !global;  // 23px
$icon-sm                                                :ceil(($icon-base * 0.75)) !global;  // 12px
$icon-xs                                                :ceil(($icon-base * 0.60)) !global;  // 10px
To change icons size:
  1. Change the value to the value you want. Do not remove !global at the end
  2. SAVE the file and compile it to CSS

$icon-base                                              :your_value !global;