Recently, I was using Weex to develop a mobile e-commerce application, during which I needed to use a large number of ICONS. I accidentally thought of Alibaba’s Iconfont.

So how do we use iconfont? Here is a simple introduction to the use of iconfont:

1. Visit the official website of iconfont http://www.iconfont.cn; 2. Create a new icon project as shown below:

4. Click “My Project” and then click “Generate code” to add the generated code to Weex project, as shown below:

5, in the Weex project component initialization function, introduce the image set, pay attention to use the hump name.

created() {let domModule = weex.requireModule('dom');
    domModule.addRule('fontFace', {'fontFamily': "iconfont".'src': "url('http://at.alicdn.com/t/font_521216_w212618qmo.ttf')"})}Copy the code

6. Then, you can use the ICONS in Weex pages. Such as:

<text class="iconfont bar-ic"> &#xe644; 

  <style>
   .iconfont {
        font-family:iconfont;  
    }
   .bar-ic{
        padding-top: 14px;
        font-size: 38px;
        color: red;
    }
  </style>
Copy the code

The running effect is as follows:

Iconfont supports three references: Unicode references, Font-class references, and symbol references.

Unicode reference

Unicode is the original use of fonts on the web. It has the following features:

  • Best compatibility, support ie6+, and all modern browsers.
  • Support to dynamically adjust icon size, color and so on according to the font.
  • But because it is a font, it does not support multicolor. Use only monochrome ICONS on the platform, even if there are multi-colored ICONS in the project, the color will be automatically removed.

Step 1: Copy the font face generated under the project:

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot? #iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
Copy the code

Step 2: Define styles that use iconFONT

.iconfont{
    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

Step 3: Pick the appropriate icon and get the font code to apply to the page

<i class="iconfont"> &#x33; 
Copy the code

The font – class reference

Font -class is a variant of Unicode, mainly to solve the problem of unicode writing is not intuitive, ambiguous semantics. Step 1: Copy the FontClass code generated under the project

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
Copy the code

Step 2: Pick the appropriate icon and get the class name to apply to the page

<i class="iconfont icon-xxx"></i>
Copy the code

The symbol referenced

This is an entirely new way of using it, and one that the platform currently recommends. Compared with the above two, it has the following characteristics:

  • Support for multi-color ICONS, no longer limited by monochrome.
  • With a few tricks, it is possible to adjust styles like fonts by font size and color.
  • Poor compatibility, support for IE9 + and modern browsers.
  • Browsers render SVG with mediocre performance, not as good as PNG.

Step 1: Copy the Symbol code generated below the project

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
Copy the code

Step 2: Add generic CSS code

<style type="text/css"> .icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

Step 3: Pick the appropriate icon and get the class name to apply to the page

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
Copy the code

Reference: Iconfont usage tips