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

本文介绍了如何在微信小程序中使用Font Awesome图标库,通过Transfonter网站将字体转换为base64编码,下载文件后在小程序的全局配置中引入,并修改字体名称,最后在小程序组件中直接调用图标类名实现展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

网上看到的方法,亲测成功:参考方法

  1. 下载font-awesome字体包

    font-awesome字体包

  2. 打开Transfonter网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,convert
    2

    3

  3. convert完毕后点击Download(下载神慢),下载得到的包中有stylesheet.css文件,打开后获得以下代码,并对照font-awesome.css中的内容,加入到微信小程序的app.wxss文件中

    stylesheet.css

    stylesheet.css

    font-awesome.css

    font-awesome.css

    在写入app.wxss时将字体名改成了fa

    app.wxss

    /* 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-flag"等font-awesome即可,如

    <view class="head">
        <view class="title">微信小程序</view>
        <view class="desc">添加font-awesome:<text class="fa fa-flag"></text></view>
    </view>

    result

    此为上面实现的demo

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值