How to use font-awesome icons in WeChat applet

Download font-awesome font package
Open the Transfonter website and upload the font fontawesome-webfont.ttf (theoretically other file formats can also be converted, but I have not tried it yet) ), select base64 encoding, convert and download

. There is a style file in the downloaded package. After opening it, you will get the following code, and compare it with the content in font-awesome.css and add it to WeChat

## in the app.wxss file of the mini program

@font-face {
font-family: 'fa';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh3kaGVhZAbB4eAAAADcAAAANmhoZWEO+QqbAAAB......long long) format('truetype');
font-weight: normal;
font-style: normal;
}
.fa {
font-family: "fa" !important;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
//long long long...........

Then use class="fa fa-user" in the mini program, such as

The above is the detailed content of How to use font-awesome icons in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!