当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序如何使用font-awesome图标?

微信小程序如何使用font-awesome图标?

2018-06-13 15:36 来源: 霸界科技

摘要:微信小程序使用font-awesome图标,要下载font-awesome字体包。...

期权保本理财
  微信小程序使用font-awesome图标,要下载font-awesome字体包。
 
  打开Transfonter网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,convert后下载。
 
微信小程序如何使用font-awesome图标?
 
  下载得到的包中有style文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程序的app.wxss文件中。
 
  @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...........
 
  然后在小程序中使用class="fa fa-user"即可,如<text class="fa fa-user"></text>
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088