组件详情
font-awesome图标库for小程序

font-awesome图标库for小程序

上传者:李泽辰    上传时间:2017-04-06 17:54:15

  679

其他

下载   喜欢

font-awesome图标库for小程序 介绍

WeApp-FontAwesome

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

参考方法

  1. 下载font-awesome字体包
  2. 打开Transfonter网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,convert后下载
  3. 下载得到的包中有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...........
    
  4. 然后在小程序中使用class="fa fa-user"即可,如<text class="fa fa-user"></text>

精品推荐
最新发布

联系我们

电话:400 866 0210 (工作日 9:00 ~ 18:00)

QQ群:385046190

客服:service@pgyer.com

商务:bd@pgyer.com

版权所有 © 西安点测网络科技有限公司 2014 - 2019 陕ICP备15010407号-4