Create Your Own Webfont
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
- Download the npm package
- Create a SVG folder (e.g.
/assets/svg/
) which contains all the*.svg - files
which should be part of the font. - 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.json
in 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"
]
}
Links
Weitere BeitrÀge innerhalb der Kategorie