Everything About Creating Custom Icon Fonts

Creating Icon Fonts Using IcoMoon

1. Accessing the IcoMoon Website and Starting a Project

IcoMoon is a web-based tool that makes it easy and quick to generate icon fonts. Visit the IcoMoon website and open the “IcoMoon App.” This step does not require any installation; you only need a web browser.

2. Selecting or Uploading Icons

You can select from various icons provided by the IcoMoon library or upload your own SVG files. Click the “Import Icons” button to upload SVG files. This allows you to convert icons into a font in the style you desire.

3. Generating the Font

After selecting the icons, click the “Generate Font” button. On the font settings page, you can set the font name, class prefix, etc. Here, you can assign Unicode values to each icon and specify the file name. Click the “Download” button to download the font file.

4. Applying to a Website

The downloaded file includes HTML, CSS, and font files. Include the CSS file in your website and use the icon classes to insert icons. For example:

<link rel="stylesheet" href="path/to/icomoon/style.css">

<i class="icon-home"></i>
<i class="icon-user"></i>

IcoMoon is easy to use and offers various settings to quickly generate icon fonts.

Creating Icon Fonts Using Python

1. Installing Required Libraries

To create icon fonts using Python, you need the fontforge and svgwrite libraries. These libraries assist in font generation and SVG file processing. Install them using the following command:

pip install fontforge svgwrite

2. Loading SVG Files and Generating Fonts

Write a Python script to load SVG files and generate fonts. Below is a basic example code:

import fontforge
import os

# Create font
font = fontforge.font()
font.encoding = 'UnicodeFull'

# Set icon directory
icon_dir = 'path/to/your/svg/icons'
icons = os.listdir(icon_dir)

# Add each SVG file as a glyph
for index, icon in enumerate(icons):
    if icon.endswith('.svg'):
        glyph = font.createChar(0xE000 + index)  # Assign Unicode PUA area
        glyph.importOutlines(os.path.join(icon_dir, icon))

# Set font metadata
font.fontname = "CustomIconFont"
font.familyname = "Custom Icon Font"
font.fullname = "Custom Icon Font"
font.generate("custom_icon_font.ttf")

print("Icon font generation complete")

3. Optimizing and Distributing the Font

Optimize and distribute the generated font file. Fonttools can be used for optimization.

pip install fonttools

from fontTools.ttLib import TTFont

# Optimize font
font = TTFont('custom_icon_font.ttf')
font.save('custom_icon_font_optimized.ttf')

Final Results

Following the above steps, a custom_icon_font.ttf file will be created. This file can be applied to a website for use.

Creating Icon Fonts Using JavaScript

To create icon fonts using JavaScript, you can use libraries like opentype.js. This process can be more complex than using Python but is useful if you are working within a JavaScript environment.

1. Installing Required Libraries

First, install the opentype.js library.

npm install opentype.js

2. Loading SVG Files and Generating Fonts

Example code for generating fonts using opentype.js in JavaScript:

const opentype = require('opentype.js');
const fs = require('fs');

// Set icon directory
const iconDir = 'path/to/your/svg/icons';
const icons = fs.readdirSync(iconDir);

// Create glyph array
const glyphs = icons.map((icon, index) => {
    if (icon.endsWith('.svg')) {
        const svgPathData = fs.readFileSync(`${iconDir}/${icon}`, 'utf8');
        return new opentype.Glyph({
            name: icon.replace('.svg', ''),
            unicode: 0xE000 + index, // Assign Unicode PUA area
            advanceWidth: 1000,
            path: new opentype.Path(svgPathData)
        });
    }
    return null;
}).filter(glyph => glyph !== null);

// Create font
const font = new opentype.Font({
    familyName: 'CustomIconFont',
    styleName: 'Regular',
    unitsPerEm: 1000,
    glyphs: glyphs
});

// Save font file
font.download('custom_icon_font.otf');

console.log('Icon font generation complete');

Final Results

Using the JavaScript code, a custom_icon_font.otf file will be created. This file can also be applied to a website for use.

Applying Icon Fonts to a Website

Let’s look at how to apply icon fonts to a website. Generate a CSS file to use the font file on the website.

Creating a CSS File

Create a CSS file as shown below.

@font-face {
  font-family: 'CustomIconFont';
  src: url('path/to/custom_icon_font.woff2') format('woff2'),
       url('path/to/custom_icon_font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: 'CustomIconFont';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon-home:before { content: "\e000"; }
.icon-user:before { content: "\e001"; }

Adding Link to HTML File

Link the created CSS file to an HTML file.

<link rel="stylesheet" href="path/to/icon-font.css">

Using Icons

Insert icons using the CSS class names.

<i class="icon icon-home"></i>
<i class="icon icon-user"></i>

Conclusion

We have explored various methods for creating icon fonts. From the simple IcoMoon method to the advanced methods using Python and JavaScript, each method can be chosen based on the environment and needs. Especially, IcoMoon provides an easy-to-use interface and powerful features to quickly create fonts, while Python and JavaScript offer more customization and flexibility. We hope this article helps readers find the method that suits them best for creating icon fonts.