This article mainly introduces how to use icon font in small program.

1 small program in the icon

  • The icon component native to the applet supports fewer than 10 types
  • Applet icon attributes: type, size, color
  • Applet icon component type: Success, Success_NO_circle, INFO, WARN, waiting, Cancel, Download, search, clear

2 What if I need more ICONS?

  • Use pictures
  • Use the font icon -iconfont
  • Using SVG

3 How to use iconfont

Font icon source: www.iconfont.cn/

Create a project

Click the Explorer – My Project – New Project button to create the project

Fill in the project information

Note: Although you can select multiple font formats when creating a project, this does not actually work.

Therefore, when generating code, you need to select the font format again in the project Settings, otherwise. Eot,. SVG format will not be used.

Adds the icon to the project

  • Add small ICONS to shopping cart
  • Click the shopping cart, select Add to item, and select the corresponding item

Generating CSS code

  • In my project, select the project to generate the code
  • Select Project Settings at the top TAB to set the font format
  • Select the type of font icon to generate
  • Click Update Code to generate a new online code or choose to download the code locally

Use iconFONT in your project

Using online code

  • Create a new iconfont. CSS file and copy the generated online code into it
  • Introduce CSS code into an HTML file
  • Sample code:<span class="iconfont icon-cangchucangku">

Note: HTTP is not added to the generated code, it needs to be added after copying the code.

Using download code

  • Create a new font folder and place the icon files with the suffix.eot,.svg,.ttf,.woff, and.woff2 in it.
  • Modify the icon file path in iconfont. CSS.
  • Import iconfont. CSS into the HTML file.
  • Sample code:<span class="iconfont icon-cangchucangku">.

4. Use iconfont in applets

Using online code

  • Create a new iconfont. WXSS file in the applet.
  • Import the iconfont. WXSS file into the app. WXSS style file,@import 'iconfont.wxss';.
  • Code examples:<view class="iconfont icon-cangchucangku" style="font-size:100rpx;" ></view>.

Using download code