How to use the font-awesome icon for WeChat applets

Download font-awesome pack open Transfonter website, upload the font fontawesome-webfont.ttf (other theoretical file formats can also be converted, did not try), select base64 encoding, convert after...

The line-downloaded package contains a stylefile. after the file is opened, download the code and compare the content in font-awesome.css to the app. wxss file of the applet.

@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-user" in the applet, as shown in figure

The above is the details about how to use the font-awesome icon in a applet. For more information, see other related articles on php Chinese network!