How to convert your icon to a Web font

In this tutorial, we'll look at how to use a free Web application Icomoon to convert a vector graph into a web font. Then look at how to use the generated font to apply the CSS to the Web page.

Advantages of using font icons

What are the advantages of font icons over bitmaps, in addition to image sharpness?

Applicability: an icon font is smaller than a series of images (especially if you use double-sized images in the retina screen). Once the icon font is loaded, your icon will be rendered immediately, without the need to download an image.

Extensibility: Icon fonts can be set to any size using the Font-size property. This allows you to output icons of different sizes at any time, however, using bitmaps, you must output a different file for each image of a different size.

Flexibility: text effects can be easily applied to your icons, including effects such as color, shading, and flipping. They can also be displayed in any context.

Compatibility: Web fonts support all modern browsers, including the low version of IE. Detailed compatibility can be clicked here.

Method/Step

2. 1

   1. Prepare your illustrations

   First, you need a program that can create vector icons, and you can find the output SVG format, such as "Illustrator" or "INkscape".

   When you design, you can use any color you like, but the icon must be a solid color. Make sure that the size of each icon is the same. Having an icon higher or wider makes it difficult to create a consistent font. Here we have to reduce the width of the airship icon so that it matches the other icons.

4. 2

   2. Clean up

   Double-check each icon to make sure it's not defective-the details are complete in small sizes, and small flaws can be found when you zoom in. In the icon shown, I need to delete the jagged path.

   In Illustrator, use the Pathfinder tool to unify the cascading elements, minus the preceding elements, such as the star icons in these icons.

   The key principle is to make sure your icons are readable in small sizes. Possible simplification of the heart.

6. 3

   3. Lead SVG

   Now, select an icon and copy and paste it into a new document scene (for example, 200px X 200px). Scaling is also consistent. You may find that it has a baseline size setting. Use a colored icon, such as a black icon in a white background.

   Now select "Save" in the menu "file" and choose to save the file in "SVG" format. Use the default SVG settings. Once you have done all the icons, you can create a Web font.

8. 4

   4. Import to Icomoon

   Open the Icomoon Web app. Import an icon, click the "Imort Icons" button, then select the SVG file you want to add--you can also add multiple files at once. These icons will appear in the "Your Custom Icons" area. If they are highlighted in yellow, these icons are the font of the icons you will be creating. In this example, you can see that I have not only exported the icons I created myself, but also added other icons to "mini-icons".

10. 5

    5. Export fonts from Icomoon

    If you want to adjust the position, size, or rotation of the icon, you can click the "Edit" button. You can use the Save Copy button to create a change to the picture (for example, a mirrored Peacemaker label). Add a meaningful icon tag, as this will be used to generate the class name.

    When you are ready, click the "Font" button at the bottom of the screen to start creating fonts. This allows you to specify which icon is mapped to which character, for example, if you want to set a set of six rotated balls, you can specify the characters for each of the six balls: Q, W, E, R, T, and Y. You can also choose the name of a font according to your own hobby. You can also adjust the font's indicator, unless you want to set the font and standard text, you don't really need to worry about this.

12. 6

    6. Download font files

    Click "Download" to download the font package to your computer. He has a word. The folder contains the font itself (Woff,eot,ttf format), as well as an HTML sample page and the corresponding CSS. There is even a JavaScript file and a workaround if you need to support IE or IE7.

    Copy the font folder to your website and add fonts to your project. You need to copy the CSS style from the Style.css file and paste it into your Web site's CSS file, but my method is to rename it to Font.css and keep him as a separate CSS file. When you need to, you are introducing this CSS file into your HTML.

14. 7

    7. Call Font

    As you can see in the sample file index.html, there are two ways to call, one is through character (unicod or name) and the other by the class name. The first example uses the HTML5 Data-icon custom attribute.

    Here, the FS1 class name is used to set the font size. This "Aria-hidden" property helps ensure that characters can be read by screen readers.

    The second method uses a SPAN element:

    This method is very useful, and your characters can be displayed together with the text in inline.

16. 8

    8. Advanced Ideas

    Just as we've just hovered over to change the icon color, we can use the color properties and font properties to modify the icon. You can set other genera, such as text shading and transparency, to set the effect of the icon.

    END

Precautions

• The symbol font can be used to create applications using a dedicated font, such as glyphs, but the need for a professional typesetting tool or the requirement to build a simple icon font, such as the physical relationship between spacing and weight, is not very important.
• So far, the simplest approach is to use a Web application Icomoon made with Keyamoon to solve all the hassle of converting characters into Web fonts.
• This HTML5 application solves all the hassle of creating font files and how to use the Created icon fonts. Icomoon comes with a large number of icons, you can also add more icons through the gallery, most of which are free to use (check their licenses first). If you are looking for icons like "File download" and "Shopping cart", then you will find that using standard icons is much more convenient than creating them yourself.

How to convert your icon to a Web font