Navigation
Limitless support

Limitless - Icons

Home Compiling SCSS
Icons overview
Overview

Limitless includes 3 icon sets: Icomoon, Fontawesome and Material Design. Default icon set if Icomoon, which was hardcoded in previous versions and the process of replacing icon set was quite difficult. Starting from version 2.3, all icon styles have been converted into SCSS files and from now on can be easily changed directly in SCSS variables. Location of CSS files has been also changed.

Usage

All icon sets have same installation process. All SCSS and CSS files have same names, the only difference is folder name that contains files. Installation process is the following:

  • First of all you need to adjust path to font files in _variables.scss located in /global_assets/scss/shared/icons/[icon set name]/ folder. Open this file and change font path variables and/or change icon class prefix if necessary. This step is required only if you change file location.
  • Compile your SCSS files for icons. Generated CSS file is located in /global_assets/css/icons/[icon set name]/ folder. This path can be also changed in gulpfile.js
  • Include styles.min.css in your <head> section on your page
  • You are done!
Icomoon set

Icomoon is a custom icon set based on Icomoon Ultimate pack. By default it includes 1600+ icon, but this number was reduced and current set contains 1145 icons, all based on 16px grid. This means they look crisp and sharp in 16px (32px. 48px. 64px etc) size. Icon class names start with .icon- prefix.

SCSS files location: /global_assets/scss/shared/icons/icomoon/

CSS files location: /global_assets/css/icons/icomoon/

Version 2.3 also includes selection.json file - you can use it for editing current icon set in Icomoon app and generating a new icon set. Just import it in the app, select/unselect icons and generate a new font. Keep in mind that icon classes should have icon-* prefix.
Font Awesome icons

Font Awesome set includes 1500+ icons from the latest version 5. This famous icon set also includes brand icons and come in 2 styles: regular and solid. Font Awesome icons are based on 14px grid and best font size for them is 14px (28px, 42px, 58px etc). This library is in active development and I'll be updating it on regular basis. Icon class names start with .fa- prefix and have additional class names: fab - brand icons, far - outline icons, fas - solid icons.

SCSS files location: /global_assets/scss/shared/icons/fontawesome/

CSS files location: /global_assets/css/icons/fontawesome/

Material Design set

Material Design icon is a part of Material design language created by Google a while ago. It includes 845 icons in a solid style. All icons are based on 24px grid, but they also look great in 16px and 20px sizes. Icon class names start with .mi- prefix.

SCSS files location: /global_assets/scss/shared/icons/material/

CSS files location: /global_assets/css/icons/material/

Compiling SCSS files
Overview

Starting from version 2.2 gulpfile.js includes a separate task for compiling icon sets, which is called gulp icons. First of all you need to look at iconset variable, which is also responsible for generated CSS paths. If you change variable to some other name, your CSS files will be automatically added to a folder with the same name. This is how it works. Just make sure you are using correct icon set name.

Icons have 2 global variables defined in /global_assets/scss/_config.scss file: $icon-font-family and $icon-font-size. Font family is very important one since it needs to match font family that is set in SCSS sources. Font size is less important, but still important - you can change it to whatever you want, but this change also requires some adjustments in other SCSS files where needed.

SCSS files

Each icon set includes 5 SCSS files:

  • _base.scss - basic styles for icon classes
  • _icons.scss - all icons
  • _mixins.scss - set of mixins
  • _variables.scss - core icon variables
  • /compile/_styles.scss - imports all other files. This is the file you need to compile. If you change the name, gulp will change generated CSS name accordingly.
Gulp task

For those who are familiar with Gulp, explanation is not necessary as it's very simple task. For other users here it is:

// Variable
iconset = 'icomoon';        // 'icomoon' (default), 'fontawesome', 'material'


// Task
function icons() {
    return src('global_assets/scss/shared/icons/' + iconset + '/compile/*.scss')
        .pipe(compileSass())
        .pipe(postcss(processors))
        .pipe(minifyCss({
            level: {1: {specialComments: 0}}
        }))
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(dest('global_assets/css/icons/' + iconset));
}
  • First things first - grab SCSS files from icons location. All variables correspond to folder names where SCSS files are, so by setting e.g. 'material' gulp will look for all files with .scss extension in 'global_assets/scss/shared/icons/material [according to variable]/compile/*.scss'. That is why using correct values is important.
  • minifyCss task compresses generated CSS and removes all comments
  • rename says for itself - it adds .min suffix to generated CSS
  • And then places styles.min.css file in /global_assets/css/icons/[icon set name]/ folder. Here logic is the same - iconset variable is basically folder name that contains generated CSS.
If you are not familiar with Gulp, take a look at Compiling SCSS page. It includes detailed instructions for setting up gulp with all plugins and description of all other tasks.
Page navigation
Contact author