1. Advantages of using font icons:
1.1 Reduce the packaging volume. Some platforms such as WeChat applets have volume limits when publishing. Extensive use of static resources will make the packaging volume easily exceed the limit.
1.2 Font icons are vector and will not be distorted or blurred when scaled.
1.3 Compared with referencing multiple network icons, the font icon only needs one css file, thus reducing the number of network requests and saving traffic compared with downloading images.
2. Simply import the iconfont icon library into HBuilder X
2.1 Create a new blank uni-app project
Create a new blank uni-app project test iconfont, select VUE2 for the Vue version, and use the default template.
The initial structure of the project is as follows, the VUE version is selected as vue2, and the default module is
2.2 Create iconfont project warehouse
Find the project option in the resource management drop-down menu on the iconfont official website, click in and select the plus sign on the right to create a new project.
After creating the project, you can search and select the icon you need in the icon mall, and then add it to the project
In the project I initiated, select and click Generate Code
Click the link below the copied code to view the code
3. Use iconfont icon in uni-app project
3.1 Create the common directory in the project root directory and create the iconfont.css file in the directory
3.2 Copy and paste the code generated in the iconfont icon library into the iconfont.css file and add the https prefix
url('//at.alicdn.com/t/font_xxx')
url('https://at.alicdn.com/t/font_xxx')As shown above, the default path rule of the internal URL of the file here belongs to the file protocol on the app side. Therefore, in order to be displayed normally on the app side, the previous protocol must be completed by itself, otherwise the app cannot download the style.
If the content downloaded file exceeds 40kb, base64 transcoding is required. You can search for relevant tool websites to transcode iconfont files online.
Import the iconfont.css file in the <style> tag of App.vue and mount it globally
@import url("common/iconfont.css");
3.3 Use iconfont icon in the index page.
First, we go to the iconfont official website, select the corresponding icon in my project and click to copy the code
Add the <text> tag in the index view and call the iconfont in the class attribute.
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="iconfont icon-caret-down share" ></text>
</view>
</view>
</template>Among them, iconfont represents calling the iconfont icon library. The icon-caret-down in the middle is our icon code. Share is a custom style attribute, which can realize functions such as custom font size and color.
