zoukankan      html  css  js  c++  java
  • 微信小程序使用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- 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>
  • 相关阅读:
    Alpha 冲刺 (8/10)
    Alpha 冲刺 (7/10)
    Alpha 冲刺 (6/10)
    团队作业-随堂小测(同学录)
    Alpha 冲刺 (5/10)
    LeetCode-1
    c++向量
    软件工程实践总结作业
    个人作业——软件产品案例分析
    个人技术博客Alpha----Android Studio学习
  • 原文地址:https://www.cnblogs.com/geewonii/p/8084416.html
Copyright © 2011-2022 走看看