Introduction

A webfont can hold svg or other icons for you, so you can easily access the icons during web development process.

List of Webfont Providers and SVG sources

HINT: Check the license of the icons / images which you are using and threat the owner with respect!

Preparation

  1. Download the npm package
  2. Create a SVG folder (e.g. /assets/svg/) which contains all the *.svg - files which should be part of the font.
  3. Create the font from terminal

1. Install the command line tool (cli) from the npm package icon-font-generator globally (-g) with npm package manager

npm install -g icon-font-generator

3. Command (Powershell) to create your font from terminal, pwd stands for the current working directory

icon-font-generator "${PWD}/assets/svg/*.svg" `
    -out ${PWD}/assets/fonts `
    --name myWebFont `
    --css true `
    --csspath ${PWD}/_sass/webfont-myWebFont.scss `
    --cssfontsurl ../fonts `
    --html true `
    --htmlpath ${PWD}/_layouts/demo-webfont.html `
    --prefix svg-icon `
    --tag em

VS Code Task

Visual Studio Code (VScode), offers tasks to automate some tasks like a Makefile or Rakefile.

Here is an example task for the tasks.jsonin VScode to create the webfont, based on a jekyll blog theme.

{
    // https://github.com/Workshape/icon-font-generator
    "label": "Generate Web-Font",
    "type": "shell",
    "command": "icon-font-generator",
    "args": [
        "${PWD}/assets/svg/*.svg",
        "--out", "${PWD}/assets/fonts",
        "--name", "myWebFont",
        "--css", "true",
        "--csspath", "${PWD}/_sass/webfont-myWebFont.scss",
        "--cssfontsurl", "../fonts",
        "--html", "true",
        "--htmlpath", "${PWD}/_layouts/demo-webfont.html",
        "--prefix", "svg-icon",
        "--tag", "em"
    ]
}