How to reference external CSS files and iconfont in WeChat applet wxss

cause

The way to import external files into a mini program is: @import "*/*.wxss";

Due to business needs, iconfont needs to be used in the small program being developed, and it is easy to think of the introduction method of H5:

````
@font-face {font-family: "iconfont";
 src: url('iconfont.eot?t=1485242349767'); /* IE9*/
 src: url('iconfont.eot?t=1485242349767#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('iconfont.woff?t=1485242349767') format('woff'), /* chrome, firefox */
 url('iconfont.ttf?t=1485242349767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1- */
}

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

````

Because this CSS style is universal, it is placed in lib/style/font.wxss. The file directory is as follows:

It is introduced into the required file through @import, but it has no effect.

Reason: The font-face URL of the wxss file of the applet does not accept the http address as a parameter, but can accept base64. Therefore, you can first download the font file, convert it to base64, and then reference it.

The solution is as follows:

1. First, go to Alibaba vector icon library (http://iconfont.cn/) to generate your own font icon, download it, and find the ttf format file

2. Go to this platform https://transfonter.org/ and convert the font file into base64 format

3. Introduce in lib file

4. Add fonts to wxss

5. Display Effect

Summarize

This is the end of this article about how WeChat mini program wxss references external CSS files and iconfont. For more relevant content about mini program wxss referencing external files, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!