微信小程序使用font-awesome图标库

网上看到的方法，亲测成功：参考方法

下载font-awesome字体包

打开Transfonter网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载

下载得到的包中有style文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信
小程序的app.wxss文件中

1. @font-face {
2. font-family: ‘fa’;
3. src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh3kaGVhZAbB4eAAAADcAAAANmhoZWEO+QqbAAAB……long long) format(‘truetype’);
4. font-weight: normal;
5. font-style: normal;
6. }
7.  
8. .fa {
9. font-family: “fa” !important;
10. font-size: 16px;
11. -webkit-font-smoothing: antialiased;
12. -webkit-text-stroke-width: 0.2px;
13. }
14.  
15. /* makes the font 33% larger relative to the icon container */
16. .fa-lg {
17. font-size: 1.33333333em;
18. line-height: 0.75em;
19. vertical-align: -15%;
20. }
21. .fa-2x {
22. font-size: 2em;
23. }
24.  
25. //long long long………..

然后在小程序中使用class=”fa fa-user”即可，如<text class=”fa fa-user”></text>

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。