A problem

There are only nine types of icon component in wechat mini program: Success, Success_NO_circle, INFO, WARN, Waiting, Cancel, Download, search, and clear. Refer to the official icon component documentation for details.

An idea

We tend to want to expand the ICONS of the Icon component without being limited by the nine ICONS mentioned above. This involves the question of how to customize ICONS. There are many ways to customize ICONS, such as using images, sprites, CSS style drawing, SVG vector files, etc. This article focuses on how to customize the icon component icon of an applet using vector fonts.

A concept

What is vector font?

Fonts include dot matrix fonts and vector fonts. Vector fonts are widely used at present, which can be divided into three types: Adobe Type1, Apple and Microsoft TrueType, and OpenType, an open source font jointly led by Adobe Apple and Microsoft. For vector fonts, each Unicode is the encoding index, and each character description is a geometric vector drawing description. Vector fonts are drawn in real time, so any color can be filled in real time, and they can be scaled stepless without jagging.

To use vector fonts, you need to refer to a very useful website: Iconfont- Alibaba vector Icon library. This site not only provides icon download, but also provides custom vector icon generation and download. Next I’ll take a step-by-step look at how to use vector fonts to customize applets icon component ICONS with rich screenshots.

A practice

Get vector icon

Open theIconfont- Alibaba vector icon libraryThe homepage of the website is as follows:

Because here we do not care about what the icon looks like, only about how to step by step from vector icon generation to micro channel small program code from the definition of icon component icon. So we directly select the first icon collection and click on it as shown below.

Then click on the first icon library, which is detailed below. Here we put the mouse on the third icon – coffee bean icon, there will be three buttons, respectively add to cart, favorites, download. We need to click the Add to cart button.

At this time, the shopping in the upper right corner will have a red corner mark. Click the button in the upper right corner to display the following interface.

Then click the “Add to Project” button and the following screen will pop up. If there is no project, create one, and if there is one, just choose the one you think is appropriate. So I’m going to create a Test project ahead of time, and I’m going to select the Test project.

After a project is added, the page automatically switches to the project details page. This screen contains the ICONS that have just been added.

When we click on the “View online links” button in the middle, a series of code is generated and displayed in the middle of the page. At this point, our task at iconfont.cn is complete. We have the remote link and Unicode value for the icon we want. The code just generated is the remote link to the icon, below the coffee bean icon. The typeface is the Unicode value of the icon. These two contents will be used in the preparation of wechat applet code below.

Wechat small program coding

The code of wechat small program is relatively easy to write, first write WXSS file, paste the remote font link just got directly into WXSS, then write custom iconFONT style, and finally reference in icon component. The code is as follows:

WXSS code

Note that the font-face code copied in iconfont is pasted directly into WXSS. Unicode  for the coffee bean image just change the &#x in front of it to \ and place it in the content of icon-coffee.

@font-face {
  font-family: 'iconfont';  /* project id 1834535 */
  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot');
  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff') format('woff'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" ! important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-coffee:before {
  content: "\e634";
  color: darkgoldenrod;
  font-size: 70px;
}
Copy the code

WXML code

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

Running effect

This concludes the process of using vector fonts to customize applets icon component ICONS. If you have any questions, please discuss them.

Special instructions

This article is influenced by the seventh lesson of “micro channel small program full stack development actual combat”. In learning the seventh lesson, I do not know how to font face, so I search for some, combined with the seventh lesson part of the notes summed up into this article.

This article is just a summary of personal notes, share out to everyone, I hope to help.

The resources

  1. “Micro channel small program full stack development actual combat” lesson 7 geek time
  2. Iconfont — Help Center — Code application

Copyright statement

This article was published by QinGeneral

Synchronously posted on CSDN blog, search author QinGeneral synchronously posted on wechat public account: AndroidRain can be reproduced without authorization, even without the need to retain the above copyright statement; Please be sure to indicate the author when reprinting.