On the font of icons

This article was reproduced from: http://isux.tencent.com/icon-font.html

In the mobile phone-side web App project, often encounter small icons on the phone to display a more ambiguous problem, through the practice found a better solution, icon font. In the micro-community project, there are a lot of small icon (icons), such as share, reply, like, return, topic, access, arrows, etc., these icons are generally solid color. Start to consider using double-size sprite diagram, CSS style settings only display One-second size, so that the size of the retina display is normal, once enlarged screen after the icon becomes blurred, the results of the test is not ideal, and then consider the multiple sets of icon adaptation scheme, SVG vector diagram, etc. , all because of a variety of reasons to give up (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, by looking up icons fonts related technical blogs and articles, and combined with the actual application of the project to comb out the font of the icon in this article, Hope for the students who are learning and using the refactoring 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. A part of the icon font used for the micro community.

Advantages and disadvantages of using icon fonts

What are the advantages of font icons over bitmaps, in addition to image sharpness?
1. Light weight : An icon font is smaller than a series of images (especially if you use double images in the retina screen). Once the icon font is loaded, the icon will be rendered immediately, without the need to download an image. You can reduce HTTP requests and perform performance optimizations with HTML5 offline storage.

2. Flexibility : Icon font can be set to any size using the Font-size property, plus a variety of text effects, including color, hover status, transparency, shading, and flipping. 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 the low version of IE. Detailed compatibility can be clicked here.

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

How to get the icon font and use

To get the icon font, there are two ways, one to find a paid website to buy, the other is to free website download, provide free download site many, God flew once published a blog icon font big Search, listed above a lot of free site 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;), 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> likes </a><a href= "javascript:;" ><span cass= "icon" >& #x0021;</span> likes </a>

To show the effect, you also need to write a style class. icon to determine which font to display for this character, as follows:

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

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

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

As you can see, a class name of "Praise" has been added. The magic happens in CSS, as in the above, the first step is to define the font, and then use: before pseudo-element to produce a character icon, where "before" means that the character appears on the left and "after" appears on the right.

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

3. Using the Data-icon property
A similar approach to the above is to use the HTML5 "data-" property. Such as: Create a Data-icon property.
Aria-hidden= "True" is to prevent the reader from reading the characters directly, not for all platforms to be effective.

<a href= "javascript:;" ><span aria-hidden= "true" data-icon= "!" ></span> likes </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 your own icon font

The above is a few ways to use the free icon font, below to see how to make their own icon font.

1, first need to create vector icon software, and can output SVG format, such as "Illustrator" or "Inkscape". You can also use Photoshop's path tool to draw the desired icon, and then export the path to illustrator to fill the color. For Adobe Illustrator Software.

Note that the path must be closed, 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. For example, the middle diagram (mouth part) is a single-path stroke (not closed), the Import icon generator will be as shown on the right, the mouth part of the display does not come out.

2, when the icon is finished, select "Save" in the "File" menu and save the file in "SVG" format. Use the default SVG settings.
3, the SVG format to import the icon 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 generator http://icomoon.io/app/
icomoon! A builder that can 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 customizing the icon, Icomoon also has its own free collection of huge icons, all very good.
Open the address and click the Start the App button.

Clicking the Import Icons button imports the SVG icon, which is related to the icon after import, such as check, delete, move, edit, etc.

Once the edit is complete, you can download it, which is available in two ways: Photo and font version! The image version is a PNG format that has been processed by CSS sprites technology, and the font version is available in a variety of formats (EOT,SVG,WOFF,TTF).

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

After you download the ZIP package, you will get the file as you extracted it. Copy the Fonts folder to your Web site to add fonts to your project.
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, locate the @font-face in the CSS file and modify the URL path to your local relative path.

Once the fonts and paths are set, the corresponding class is just called on the HTML page. If you want to be compatible with IE7 browser, 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>

(2) Icon font generator http://fontello.com/

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

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

Isux Vector Font Library currently provides a rich font icon, can be used for download, temporarily does not support the import of custom icons, look forward to the future its function will be more and more perfect. Everyone has any good suggestions and ideas to contact them.

Through the generation of the above-mentioned generator icon font, plus the use of CSS on its size, color, transparency, shadow, transition various transformations such as control, not only can be scaled freely, produced a variety of special effects, but also very easy to maintain, can be operated through a variety of different ways. I believe that everyone has experienced his strong point, to meet the daily work needs should be enough. Although there are so many advantages, but the icon font is not perfect, there are some shortcomings. Such as: can only be rendered into monochrome problems, screen readers (although there are solutions, but not perfect) problems, performance problems, etc., waiting for us to find and solve. I believe there will be better solutions in the future, such as SVG (Scalable Vector graphics), graphics technology that may replace bitmaps in the future.
Based on the present, look to the future. Finally, make a look at the current Icon Font Generator tool!
can support importing more custom formats, such as EPS, AI, etc.
The ability to introduce project management mechanisms that can manage multiple project icons at the same time in the same account.
More free and rich icon fonts are available for download and use.

FAQs

1. Cross-domain issues:
(1) by configuring your 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 domain.
(3) Use Base64 to place CSS (Icomoon the Encode & Embed Font in CSS option when exporting the icon).
2, the font icon appears jagged problem:
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
3, @font-face and performance:
For @font-face performance issues, 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
Recommendations and summaries in the article:
(1) Use it only when you are sure that you need @font-face very much;
(2) Define your @font-face in front of all script tags;
(3) If you have many font files, consider dispersing them under several domain names;
(4) Do not include the unused @font-face declaration--ie will not be divided into its use or not, all load;
(5) Gzip font files while giving them a future expiration header statement;
(6) Consider the post-loading of font files, at least for IE.

On the font of icons