Pre-operation (perform certain operations normally)

1. Introduce the font icon app.css

@font-face { font-family: 'iconfont'; src: url(/static/fonts/iconfont.eot); src: url(/static/fonts/iconfont.eot#iefix) format('embedded-opentype'), url(/static/fonts/iconfont.woff2) format('woff2'), url(/static/fonts/iconfont.ttf) format('truetype'), url(/static/fonts/iconfont.woff) format('woff'), url(/static/img/iconfont.38db4ade.svg#iconfont) format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="ion-"], [class*=" ion-"] { /* use ! important to prevent issues with browser extensions that change fonts */ font-family: 'iconfont' ! important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ion-right:before { content: "\e932"; } .ion-right2:before { content: "\e933"; }Copy the code

2. Position for storing the icon file

3. Use font ICONS on specific pages

<view class="btn-list _ul data-v-dcbcfe34"> <view class="_li data-v-dcbcfe34"> <view data-event-opts="{{[['tap',[['navigateHandle',['/pagesA/pages/course-order/course-order']]]]]}}" bindtap="__e" class="data-v-dcbcfe34"> <view class="iconfont ion-m-order _i data-v-dcbcfe34"><label class="path1 _span data-v-dcbcfe34"></label><label class="path2 _span data-v-dcbcfe34"></label><label class="path3 _span data-v-dcbcfe34"></label><label class="path4 _span data-v-dcbcfe34"></label><label class="path5 _span Data-v-dcbcfe34 "></label> </view><label ID ="message" data-count="0" class="_span data-V-dCBcFE34 "> Agency order </label> <view class="ion-right2 _i data-v-dcbcfe34"></view> </view> </view> <view class="_li data-v-dcbcfe34"> <view data-event-opts="{{[['tap',[['navigateHandle',['../about/about']]]]]}}" bindtap="__e" class="data-v-dcbcfe34"> <view class="ion-m-about _i data-v-dcbcfe34"><label class="path1 _span data-v-dcbcfe34"></label><label class="path2 _span data-v-dcbcfe34"></label><label class="path3 _span data-v-dcbcfe34"></label> </view><label id="message" data-count="0" Class ="_span data-v-dcbcfe34"></ label> <view class="ion-right2 _i data-v-dcbcfe34"></view> </view> </view>Copy the code

Expected results (what should happen)

Actual results (abnormal results that actually occur)

Solution: Use base64 format

  1. Place the font icon in the fileThe vera.ttf filePut it on a format conversion sitetransfonter.org/

  1. Will convert the file, unzip, willstylesheet.cssThe @face code in the file is copied to the font icon CSS file of the previous projectapp.css

  1. Set a public class to ensure that the font iconfont-familyIs the introduction of @face, i.eiconfont
/* font-family: 'iconfont'; Iconfont {/* use! important to prevent issues with browser extensions that change fonts */ font-family: 'iconfont' ! important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }Copy the code
  1. Add the class name to the pageiconfont, such asiconfont ion-right2

The results are as follows:

The font icon is displayed properly

PS: The minimum conversion format should be Woff2, but considering the X5 kernel/NWJS (Chrome kernel)/JavaScriptCore of the small program, some woff2 format will not work, so use woff format