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

  1. 下载font-awesome字体包
  2. 打开Transfonter网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,convert后下载
  3. 下载得到的包中有style文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程序的app.wxss文件中
  4. @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...........

     

  5. 然后在小程序中使用class="fa fa-user"即可,如<text class="fa fa-user"></text>
posted @ 2017-12-22 09:03  geewonii  阅读(5110)  评论(0编辑  收藏  举报