Icon Font

Our allink-boilerplate comes with a default icon set. Adding or updating is done pretty quick and straight forward.

Preparing Custom Icons

When designing custom icons, make sure to:

Simplify the icon paths and layers using e.g. the Compound Path tool in Illustrator
Outline all strokes

Open https://icomoon.io/app/ in a browser.
Go to the folder static/icomoon/ in your file explorer and drag and drop the file selection.json into the browser.
Adjust the icons as required.
Hit the Generate Font button on the bottom right and then click on Download.
Extract the ZIP file in the download folder and copy only the folder fonts and the files selection.json and style.css.
Browse to the folder static/icomoon/, delete its content and paste the new files.
Open style.css in remove the the hashes to the font files. So e.g. fonts/icomoon.woff?q6h7ay becomes fonts/icomoon.woff.

Once the icons set is updated, there are two main situations you will use it.

Most of the time we work with the code (e.g. \e90b) instead of setting classes (more flexible when dealing with allink-core modules).

To get the codes, you can either load the selection.json in https://icomoon.io/app/, or you can check the file static/icomoon/style.css.

Some core modules such e.g. Social icons have settings in static/scss/base/variables/_social-icons.scss.

For example:

$social-profile-icons: (
    'facebook': '\e905',
    'instagram': '\e901',
    ...
);

In your custom module, you could do something like this:

.example-module {
  &__link {
    &::after {
      @include icomoon();
      content: '\e90b';
    }
  }
}