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

最新推荐文章于 2025-06-22 16:43:15 发布

原创最新推荐文章于 2025-06-22 16:43:15 发布 · 3w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

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

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

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

网上看到的方法，亲测成功：参考方法

下载font-awesome字体包
打开Transfonter网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert

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...........

然后在小程序中使用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