How to convert your icon to a Web font

In this tutorial, we'll use a free web application, Icomoon, to convert the vectors to Web fonts, and then apply the resulting font to the Web page through CSS.

Usually we have to use some small icons in the website that are essential. The layout looks OK at normal size, but when we zoom in on the page, you'll notice that the icon is a little blurry, and the text-based title is still clearly visible. In order to adapt to various situations, we need to try to solve it:

• Solution: Create a double-sized sprite chart and then set them to show only one-second dimensions through CSS styles.
• Although this method makes them appear on the retina screen is normal, once you start to enlarge the screen, the icon becomes blurred, but the text is still the same clear.
• The answer is obvious , I need to turn my icon into a font.

Advantages of using font icons

• Applicability: an icon font is smaller than a series of images. 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 with the Font-size property.
• Flexibility: text effects can be easily applied to your icons, including effects such as color, shading, and flipping.
• Compatibility: Web fonts support all modern browsers (including IE6).

Create an icon font

Create fonts, we can create applications using a professional font, such as glyphs. But now we want to build a simple icon font, such as the spacing and thickness of the physical relationship is not very important, whether to use glyphs is a bit overqualified.

The simplest way to create an icon font is to use a Web application Icomoon made with Keyamoon. This 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, and you can add more icons through the gallery, most of which are free to use. You'll find that using standard icons is much more convenient than creating them yourself.

Let's start together! 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.

2. Clean up

Double-check each icon to make sure it has no flaws-the details are perfect 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.

3. Lead SVG

Now, select an icon and copy and paste it into a new document scene (for example, 200px * 200px). 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.

4. Import to Icomoon

Open the Icomoon Web app, import an icon (SVG format), click the "Imort Icons" button, and 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".

5. Export fonts from Icomoon

If you want to adjust the position, size, or rotation of the icon, you can click the "Edit" button, or you can use the "Save Copy" button to create a change in the image. 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.

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.

View Sourceprint?

1	<linkrel="stylesheet"href="fonts.css">

In the CSS file you can find @font-face, you need to change the URL path to your local relative path, or you can simply put the font file and your style in the same folder.

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.

View Sourceprint?

1	<iclass="icons icon-ui"> &#x343a; <i>

Source: www.threetowns.cn

How to convert your icon to a Web font