On the font of icons

In the mobile phone web App project, often encounter small icons on the phone to show a more ambiguous problem, after the practice found a better solution, the icon font.

In the micro-community project, there are many small icon (icons), such as sharing, reply, Praise, return, topic, visit, arrows, etc., these icon (icon) are generally pure color. When you start making, consider using the double size sprite chart, CSS style settings to display only one-second dimensions, so that the size of the display on the Retina screen is normal, once enlarged screen after the icon becomes blurred, the test results are not very ideal, and later consider a number of sets of icon adaptation scheme, SVG vector map, etc. , have been given up for a variety of reasons (such as multiple sets of icons cumbersome, Android 2.3 does not support SVG format, etc., in order to solve the above problems, the use of the icon font, through the search icon font-related technology blog and article, and combined in the actual application of the project to comb out the icon font of this article, Hope to be learning and use of refactoring students have a reference and help! The contents of the article refer to the relevant technical articles and add their own understanding, errors are unavoidable, welcome criticism. The following figure is a partial icon font used by the micro community.

Advantages and disadvantages of using icon fonts

What are the advantages of the font icon in addition to the image definition, compared to the bitmap?
1, Lightweight: An icon font than a series of images (especially in the retina screen using double image) to small. Once the icon font is loaded, the icon will be rendered immediately, and no need to download an image. can reduce HTTP requests and can also be optimized for performance with HTML5 offline storage.

2, Flexibility: Icon font can be used Font-size property to set its any size, you can add a variety of text effects, including color, hover state, transparency, shadow and flip effects. Can be displayed in any background. With bitmaps, you must output a different file for each image of different sizes and effects.

3, Compatibility: Web fonts support all modern browsers, including IE low version.

In addition to the above advantages, of course, there are disadvantages
1, Icon font can only be rendered into monochrome or CSS3 gradient, because of this limit makes it not widely used.
2, there are restrictions on the use of copyright, there are a lot of fonts are charged. Of course, there are many free and open source beautiful font icons for download use.
3, the creation of their own font icon is time-consuming, the reconfiguration of personnel maintenance later on the cost of high.

How to get the icon font and use

To get the icon font, nothing more than two ways, the first to find a paid website to buy, the second is to download the free website, to provide a lot of free download site, God fly once published a blog icon font large search, listed above a lot of free website address, we are interested to download. How to use it? In general, there are 3 ways:
1, write the characters directly in the HTML file;
This method is simple and intuitive, see the following code, with a <span> element to contain a character "!" (or & #x0021;), and then add a class to this <span>. This letter is mapped to a specific icon in the selected font.

<a href= "javascript:;" ><span cass= "icon" >!</span> praise </a><a href= "javascript:;" >

<span cass= "icon" >& #x0021;</span> Praise </a>

To display the effect, you also need to write style classes. icon to determine which font of this character to display, as follows:

. Icon {font-family: ' Your-incofont-name ';}

2, the use of CSS to generate content;

Instead of adding characters directly to the HTML file, it uses CSS to generate character content. The code is as follows

<a href= "javascript:;" class= "icon praise" > Praise </a>

As you can see, a class name "Praise" has been added. Magical things happen in CSS, as above, the first step is to define a good font, and then use: before pseudo elements to produce character icons, where "before" indicates that the character appears on the left, "after" appears on the right.

. Icon {font-family: ' Your-incofont-name ';}. Praise:before {content: "f00a";}

3, with Data-icon properties

There is also a similar approach to the above is to use the HTML5 "data-" property. For example, create a Data-icon property.
Aria-hidden= "True" is to prevent readers from reading the characters directly, not to all platforms.

<a href= "javascript:;" ><span aria-hidden= "true" data-icon= "!" ></span> Praise </a>

Combined with some CSS properties, you can write the following code

[Data-icon]:before {font-family: ' Your-incofont-name '; content:attr (Data-icon); speak:none;}

Make self-icon fonts

Here are a few ways to use the free icon font, see How to make your own icon font.

1, the first need to have the creation of vector icon software, and can output SVG format, such as "Illustrator" or "Inkscape." You can also use the Photoshop Path tool to draw the desired icon, and then export the path to the illustrator to fill in the color. The following figure is the Adobe Illustrator software.

Note It must be a closed path, it cannot be a single path stroke, and if it is a single path, the font icon will not appear when it is generated. More than two graphics to merge, graphics to reduce the use of nodes. As shown in the figure below, the middle figure (mouth portion) is a single path stroke (not closed), and the import icon Builder will look like the image on the right, with the mouth partially displayed.

2, after the completion of the icon, select the "File" menu "Save", save the file as "SVG" format. Use the default SVG settings.
3, the SVG format icon imported into the Icomoon, Fontello, Iconfont font generator, to generate the desired icon font, the following describes the use of several font generators:
(1) Icon Font Builder http://icomoon.io/app/
icomoon! A generator that allows you to create custom icons (fonts) through personalization! Icomoon is a free service that allows us to create custom icon or icon fonts by using different settings. In addition to the custom icon, Icomoon also has its own free mass icon set, are very good.
Open the address and click the Start App button.

Click the Import icons button into the SVG icon, import the icon after the relevant operations, such as SELECT, Delete, move, edit and so on.

After the editing is complete, you can download it, which offers two ways to download it: Picture version and font version! The picture version is a PNG format that has been processed by CSS sprites technology, and the font version has a variety of formats for our selection (EOT,SVG,WOFF,TTF).

If you want to be compatible IE7 the following browsers, please tick the support IE7 (and older) option in the settings and generate a separate JS, CSS file.

After you have downloaded the zip package, you will get the following image file after decompression. Copy the Fonts folder to your site and add fonts to the item.
Copy the CSS style from the Style.css file and paste it into your Web site's CSS file, or you can save it as a single style file.

After the copy is complete, find @font-face in the CSS file and modify the URL path to your local relative path.

After the fonts and paths are set, you can just call the corresponding class on the HTML page. If you want to be compatible with IE7 browsers, you need to refer to the IE7 directory JS. Such as:

Call Class:<span class= "icon Icon-add" ></span>
Call Js:<script src= "Ie7/ie7.js" ></script>

It is generated in the same way as the above, do not introduce here, it is easy to get started.

(3) Isux vector font icon Library http://font.isux.us/

Isux Vector Font Library currently provides a wealth of font icons, available for downloading, and temporarily does not support the introduction of custom icons, look forward to the future of its functions will be more and more perfect. We have any good suggestions and ideas to contact them.

Through the creation of the above several generators icon font, plus the use of CSS for its size, color, transparency, shadow, transition various transformations, such as control, not only can zoom freely, make a variety of special effects, but also easy to maintain, you can use a variety of different ways to operate them. Believe that you have experienced his strength, to meet the day-to-day needs of the work should be enough. Although there are so many advantages, but the icon font is not perfect, there are some shortcomings. Such as: Problems can only be rendered into monochrome, screen reader (although there are solutions, but not perfect) problems, performance problems, etc., waiting for us to find and solve. Believe that the future will have better solutions, such as: SVG (Scalable Vector graphics), the future may replace the bitmap graphics technology.
Based on the present, look to the future. Finally, the current icon Font Builder tool to do a look ahead!
Can support the import of more custom formats, such as EPS, AI and other formats.
Can introduce the mechanism of project management, in the same account can manage multiple project icon.
Provide more free, rich icon fonts for download.

FAQ

1. Cross-domain issues:
(1) by configuring its own server.
# for Apache
<filesmatch ". (Eot|ttf|otf|woff) ">
Header set Access-control-allow-origin "*"
</FilesMatch>
# for Nginx
Location ~*. (Eot|ttf|woff) $ {
Add_header Access-control-allow-origin *;
}
(2) placed under the same field.
(3) Use Base64 to place in CSS (Icomoon when exporting the icon, the Encode & Embed Font in CSS option) is selected in the settings.
2, the font icon appears sawtooth problem:
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
3, @font-face and performance:
For @font-face performance issues, you can refer to the following articles.
Original address: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
Translation Address: http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
Suggestions and summaries in the article:
(1) Use it only when you are sure you really need @font-face;
(2) Define your @font-face in front of all the script tags;
(3) If you have many font files, consider spreading them under several domain names;
(4) Do not contain unused @font-face declaration--ie will not use it or not, all loaded;
(5) Gzip font files, while giving them a future expiration header statement;
(6) Consider the font file after loading, at least for IE.