Burak Ozcan

How to create your own icon font with IcoMoon

You can use the IcoMoon app to create a custom icon set, from sets they provide, or from icons that you upload.

Here are the instructions.

1. Open IcoMoon App

2. Upload your SVG icons by clicking import icons.

3. Once you have imported your icons, select the icons you want to use in font and click “Generate Font” to verify your icon set.

4. Then click the preferences button on the next page. You will name your font and CSS prefix now.

5. You can customize your font in this step. I use SCSS and want to use <i> element for icon font.

6. Then download.

7. You will find the fonts folder, style.scss, and variables.scss in the downloaded zip file. These are what we need.

8. We will import using SCSS in the next step.

9. Copy the fonts folder to your project directory.

10. You will see these variables in the variables.scss file. You can keep it as it is or you can change it.

But don’t forget to change variable names in the style.scss file.

$icomoon-font-family: "filetypefont" !default;
$icomoon-font-path: "fonts" !default;

11. In the style.scss file you will see this @font-face rule. This rule creates font family.

@font-face {
  font-family: '#{$icomoon-font-family}';
  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?cb1jqu');
  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?cb1jqu#iefix') format('embedded-opentype'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?cb1jqu') format('truetype'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?cb1jqu') format('woff'),
    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?cb1jqu##{$icomoon-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

12. Now all is set. You can start to use your font like below.

<i class="file-apk"></i>

In