欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-01-25 09:41浏览: 来源:网络 作者:tianshu

网上看到的方法,亲测成功:参考方法
下载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>



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