A better solution: Iconfont from Alibaba’s mom

Step 1: Add the icon you like to the shopping cart Step 2: Save it as a project or download it locally Step 3: Download the modification and call the CSS file Step 4: Use icon icon font in the web page Website…

The benefits of using icon font ICONS on websites have been discussed before and won’t be repeated here.

I came across iconfont today, and it was a bit of a surprise, because just yesterday I was worried about icon: The website originally used the icon font icon, which was several files made by the theme author Qing Feng. The effect was quite good, but THERE was a bug that I found that many ICONS could not be displayed under Chrome. No matter how I re-edited and generated the font file, it could not be solved.

Reluctantly, I replaced the Font file with Font Awesome after realizing that I couldn’t handle the problem at my current level. Font Awesome alone is hundreds of KB (194KB in SVG files), which would definitely add to the load of site visits. Although I’m currently using 10GB of free traffic per month from Seven Cows, I don’t want to burden the site with hundreds of extra KB requests. I’m glad I found iconfont today. Here’s why I ditched the Awesome Font I just modified and switched to iconfont.

Talk freely about the pros and cons of both

The advantages of iconfont and the disadvantages of Font Awesome. -_ – | | | iconfont symbol library is quite huge, when I was to write an article or 51794, after the refresh icon now number was 52090. If such a large library still does not have the icon you need, you can also make your own icon and use the site’s online generation tool to generate a font file, ready to use in a few minutes.

In addition to its huge icon library, the IconFont is most recommended for its flexibility (to be honest, my initial impression of iconFont is that it looks a bit like one of the most versatile building blocks available on any carrier today), because it’s completely free to mix and match on demand. I mentioned this in my article about customizing the Walker class to add the ICON font ICON to the WORDPRESS navigation menu. If you only need 5 ICONS for your site, download the font files and CSS for all 5 ICONS. If you want to use iconfont’s CDN service, you don’t need to download these ICONS, just add them to your own project and reference a CSS file on your website.

Font Awesome, on the other hand, even if you only use two ICONS, you have to download the entire file to use them. As mentioned above, SVG alone is 194KB large, and there are several other font files that add up to 400+KB, not counting the CSS files that also number in the tens of KB.

Is it clear which is better? Trust that you’ve made your choice.

Come, below talk about how to use, actually very simple, but still manage a step to not very understand the students.

Step 1: Add the ICONS you like to your shopping cart

The official name is “pick-up rack”. Shopping cart is just my name, which is not accurate because it doesn’t cost anything, but it uses a shopping cart icon, so I’ll call it that. Here you can look for ICONS in the iconfont icon library, but I don’t recommend doing so because the default ICONS in the official icon library are incomplete. The correct way is to enter keywords in the input box on the right side of the navigation bar to search for ICONS, so that users will make ICONS are searched out. (I couldn’t find the ICONS of wechat, Twitter and Qzone in the icon library at first. Later, I tried to search the ICONS and found a large number of them, only to find that the official library doesn’t include these ICONS…)

Review images

Step 2: Save it as a project or download it locally

Add it to the shopping cart as shown in the picture above and you can save it as a project or download it locally, depending on your needs. I wanted to use Ali’s CDN anyway, so I saved it as a project. When saving as a project, you can choose to save as a new project or to add to an existing project, which redirects you to the project details page.

Step 3: Download the changes and invoke the CSS file

In the project details page, you can still choose whether to download the file locally or use Alibaba’s CDN, which is the CDN of course (that is, the access online link in the page). Font Class is recommended, because if you choose Unicode, you will have to write your own ICONS in CSS. This is a bit of a hassle and not my lazy style, so if you are a lazy person, please slide the slider in the upper right corner of the image to the right.

Review images

Now you have two options: call this file directly and change the HTML of the site to add the icon element class to “iconfont icon-xxx”; The second option is to download the file, make some changes and upload it to the server for local invocation, and then change the class of the element that adds the icon to “icon-xxx” in the HTML of the site. I chose the second option, which is optional. Choosing the second option requires minor modifications to the CSS. Change the selector “.iconfont “to” [class*=icon-],[class^=icon-] “:

[class*="icon-"],[class^="icon-"]{ font-family:"iconfont"! important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; - its - text - stroke - width: 0.2 px; -moz-osx-font-smoothing:grayscale; }Copy the code

Then reference the CSS file.

Step 4: Use the icon font in your web page

After the CSS call, I can add a CSS class to the element in the HTML to display the icon. See the following image. For example, if I want to call the little rocket icon in the image, I need to change my HTML to

Copy the code

This is ok.

Review images

Check out this article on how to use icon fonts in the wordpress navigation bar.