Free program Icomoon: Convert vector graphics to Web fonts

Article Description: in this tutorial, we'll look at how to use a free Web application Icomoon to convert a vector map to a web font. Then look at how to use the generated fonts to apply CSS to Web pages.

I've made some elegant icons for the site and tested them on the new website and the old ipad. Normal size, the layout looks like everything OK, but the page to enlarge the display, I found that my icon became blurred, but the text-based title is still visible. On an ipad with a Retina display screen, these icons don't look clear, even without any amplification.

My first idea was to create double size sprite graphs, and then set them to show only one-second sizes through CSS styles. While such a method allows them to be displayed on the Retina screen is normal, once you start to enlarge the screen, the icon becomes blurred. But the text is just as clear.

The answer is obvious, I need to turn my icon into a font.

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

advantages of using font icons

Besides the clarity of the image, the font icon has more advantages than the bitmap.

• Applicability: an icon font is smaller than a series of images (especially if you use a double size image in a retina screen). Once the icon font is loaded, your icon will be rendered immediately and you do not need to download an image.
• Scalability : 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, with bitmaps, you have to output a different file for each image of a different size.
• Flexibility: text effects can be easily applied to your icons, including color, shadow, and flip effects. They can also be displayed in any background.
• Compatibility: Web fonts support all modern browsers, including IE low version. Detailed compatibility can be clicked here.

Here we go!

Create an icon font

The symbol font can create applications, such as glyphs, with a proprietary font, but the need or requirement to build a simple icon font, such as spacing and thickness, is not very important for a professional typesetting tool.

So far, the easiest way to do this is to use a Web application Icomoon made by Keyamoon to solve all the hassle of converting characters into Web fonts.

This HTML5 application solves all the trouble of creating a font file and using the created icon font. Icomoon comes with a lot of icons, and you can also add more icons to the icon library, most of which are free (check their licenses first when you use them). If you're looking for icons like "file downloads" and "Shopping carts," you'll find that using standard icons is a lot easier than creating them yourself.

one step at a a

1. Prepare your illustrations

First, you need to be able to create a vector icon program, and can find 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 the size of each icon is the same size. Having an icon higher or wider will make it difficult to create a consistent font. Here, we have to reduce the width of the airship icon so that it matches other icons.

2, cleaning up

Check each icon carefully to make sure it's not defective-details are complete on a small scale, and small flaws can be found when you zoom in. In the icon shown, I need to remove 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 that your icon is a small, readable size. The heart may simplify.

3, lead into 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 do this, all the icons you can create a Web font.

4. Import to Icomoon

Open the Icomoon Web app. Import an icon, click the "Imort Icons" button, and 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 yellow displays, these icons are the icon fonts you will create. In this example, you can see that I not only exported the icons I created myself, I 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. You can use the Save Copy button to create changes to a picture (for example, a mirrored peacemaker). Add a meaningful icon tag, because 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 generating fonts. So you can specify which icon maps to which character, for example, if you want to set a set of six rotating 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 hobby. You can also adjust the index of the font, unless you want to set your font and standard text, otherwise you really do not need to worry about this.

6. Download font file

Click "Download" to download the font package to your computer. He has a Word folder that contains the font itself (Woff,eot,ttf format), as well as an HTML sample page and 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 site and add fonts to your project. You need to copy the CSS style from the Style.css file and paste it into your site's CSS file, but my approach is to rename it to Font.css and keep him as a separate CSS file. When you need to introduce this CSS file into your HTML.

<link rel= "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. Calling fonts

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

<div aria-hidden= "true" data-icon= "G" ></div>

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:

<span aria-hidden= "true" ></span>

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

If you want the icon to have a link function, you can put it in a link:

<a href= "http://www.yoursite.com"  data-icon= "s" ></a>

Here, I added a Iconlink class name and set a levitation effect:

A.iconlink {   font-family: "Youriconfont";   Text-decoration:none;   Color: #666666; } a.iconlink:hover {   text-decoration:none;   Color: #999999; }

8. Advanced Ideas

As we just hover over the icon to change the color of the icons, we can use the color properties and font properties to modify the icon. You can set the effect of the icon by setting other genera, such as text shadow and transparency.

Try it, I promise you'll never use a bitmap icon again.