Iconfont from Ali's mother (turn)

Turn from http://www.augsky.com/775.html casually talk about the pros and cons of both

In fact, the main point is to say iconfont advantages and font awesome shortcomings. -_-|||
Iconfont's icon library is quite huge, I wrote an article in the time of 51,794, and now after the refresh of the number of icons is 52,090. If you still don't have the icons you need in such a large library, you can create your own icon and use the Web site's online build tool to generate font files that can be used in minutes.

In addition to having a huge gallery of icons, the most recommended reason for Iconfont is the flexibility of her use (to be honest, Iconfont gave me the initial impression that it's a bit like a free-to-match building block package for the major carriers now), because she's completely free to mix and match on demand. I mentioned this article in the custom Walker class to add icon font icons to the WordPress navigation menu. If your site only needs to use 5 icons, then you just need to download the font files of the 5 icons and related CSS can be used. If you want to use Iconfont CDN Service, you do not have to download, directly add these icons to your own project, and then in your site to reference a CSS file.

If you just want to use 2 icons, you have to download all the files to use them, Awesome. And the above also said, only SVG 194KB big, there are several other font files add up a total of 400+kb, this is still not counted as good dozens of KB css file.

Is it very clear what is better or inferior? Believe that you have your own choice.

Come, the following talk about how to use, in fact, is very simple, but still a step to the students who do not know very well.

Step One: Add the icon you fancy to your shopping cart

The official term is "temporary shelf", the shopping cart is just my name, it seems not accurate, because there is no need to spend money ah, but it used a shopping cart icon, so let's call it this way.
Here you can look for the icon in the Iconfont icon Library, but I do not recommend that you do this, because the default is given a few of the official icon library inside the icon is not complete. The right thing to do is to search for the icon by typing a keyword into the input box on the right side of the navigation bar, so that the user-created icons are searched. (I started in the icon Library, Twitter and QQ space icon How can not find, and then try to search on the above, come out a lot of, just know the official library is not included in these icons ... ）

Second step: Save as Item or download to local

As shown in the image above, you can save it as a project or download it locally after you add it to your shopping cart, and see what you need. Anyway, I wanted to use Ali's CDN, so I saved it as a project. When stored as a project, you can choose to save as a new item or add it to an existing project, and then jump to the project details page.

Step three: Download the changes and call the CSS file

In the Project details page you can still choose to download the file to local use or use Ali's CDN, of course, choose CDN (that is, the page to get online links). It is recommended to use the font Class, because if you choose Unicode, the Code of the icon in the CSS to write their own, this is a bit troublesome ah, does not conform to my lazy style, so if you are lazy, please slide the upper-right corner of the slider to the right.

Then move the mouse to the left to get the online link here you can see the generated CSS file, you now have two choices: one is to call this file directly, in the HTML of the site to modify the elements of the added icon class is "Iconfont icon-xxx", the second option is to download this file, Then make some changes to the server local call, and then modify the HTML in the Web site to add the elements of the icon class is "icon-xxx". I choose the second kind, everybody is random.
Choose the second kind of words need to make a little bit of CSS changes, the selector ". Iconfont" to "[class*=icon-],[class^=icon-]":

2. [class*="icon-"],[class^="icon-"]{
   
4. font-family:"Iconfont"!important;
   
6. Font-size:16px;
   
8. Font-style:normal;
   
10. -webkit-font-smoothing:
    
12. Antialiased;
    
14. -webkit-text-stroke-width:0.2px;
    
16. -moz-osx-font-smoothing:grayscale;}

Then referencing the CSS file is ok.

Fourth step: Use the icon font in the Web page

After the CSS call, you can add a CSS class to the HTML to display the icon, look at this picture, for example, I want to call the image of the small rocket this icon, then I will be my HTML revision to

1. <i Class="Icon-xiaohuojian"></i>

This is both.

WordPress navigation bar How to use icon font can see this article.

Iconfont from Ali's mother (turn)