Here we introduce a method of using ttf to Base64 to introduce the iconfont font package into the project
1. Get the font package
In the Alibaba vector icon library , find the appropriate icon, and then add it to the library:
After adding the desired icon, click the shopping cart icon in the upper right corner 
, and click the download code in the pop-up box:
Unzip and OK The file package, the folder directory is as follows:
| file name | describe |
|---|---|
| demo_index.html | This file is an index file of icons, in which you can see the introduction of various import methods and the names of each icon. |
| demo.css | A style file for demo_index.html. |
| iconfont.js | The files needed for the Symbol import method. |
| iconfont.css | The files required by the font-class import method. |
| iconfont.json | configuration file. |
| iconfont.ttf | font files. |
The import method of font-class is adopted here, so only iconfont.cssthe index file demo_index.htmlneeds demo.cssto be added.
2. Modify the font package
- Create a new iconfont folder in a suitable location in the project (usually in the static directory), and put the prepared files into the ready-to-use:
2. Go to the URL where the file can be converted to Base64, such as transfonter , convert the ttf file in the original folder to Base64 code (note the settings in the red box in the figure below):
3. Unzip the converted compressed package and open it stylesheet.cssfile, copy the code of the src line:
4. Open iconfont.css in step 1, overwrite the code copied in step 3 to the corresponding src location, and save it.
In this way, the iconfont font package is successfully introduced into the project.
3. Use iconfont in the project
Open the demo_index.html file, select the font-class tab in the browser, and find the name of the chart you want to use:
as shown above, if you want to use the first chart, then copy icon-guanliyuan, and then go to the code in the project, Introduced by class name:
<view class="iconfont icon-guanliyuan">
</view>
Run the project, and you can see the effect:
you can adjust the color, size, etc. of the icon through the style like ordinary text.