微信小程序—使用font-awesome图标库（图文）

最新推荐文章于 2025-04-12 10:51:19 发布
最新推荐文章于 2025-04-12 10:51:19 发布
阅读量2.9k 收藏 5
点赞数 3
分类专栏： 微信小程序 文章标签： 使用font-awesome图标库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Poppy_LYT/article/details/99979480
版权
本文详细介绍了如何在微信小程序中使用font-awesome图标库，包括从官网下载字体包，转换ttf文件，创建并引入wxss文件，以及在app.wxss中配置，最终实现图标显示。

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

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

第一步：去官网下载font-awesome字体包
font-awesome官网
在这里插入图片描述
下载完是一个压缩包，解压之后是这个亚子
在这里插入图片描述
在这里插入图片描述

第二步：找到红线圈出的ttf文件，并上传到这个网址
在这里插入图片描述
操作如下
在这里插入图片描述

第三步：convert下载完成之后是一个压缩包，解压之后是这

最低0.47元/天 解锁文章
微信小程序使用font-awesome图标库
abczdefg的博客
01-13 3万+
微信小程序使用font-awesome
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
u012421719的博客
10-24 1万+
本文长期更新
font-awesome字体图标库在微信小程序中的使用
Y00010010的博客
04-21 1527
1.下载font-awesome 官网地址：https://fontawesome.dashgame.com 下载解压后得到文件如下： 2.利用tansfonter CSS @ font-face生成器转换字体文件 transfonter官网：https://transfonter.org 按照如下步骤操作解压下来得webfont.ttf文件： 3.在微信小程序中使用 转换后得到如下文件： （1）复制stylesheet.css文件到微信小程序，并更改文件为font-awesome-stylesh
前端项目引入font-awesome图标库
最新发布
deepseek123的博客
04-12 357
如果自己的项目文件结构与文件夹中的不一致，比如字体需要单独放一个文件夹中。则需要修改css中引入字体的位置，将url属性值改成自己项目的文件地址。这里需要修改的文件有all.css,brans.css,fontawesome.css,regular.css,solid.css。官网介绍有两种引入方式，一种是css+webfonts，第二种是js+svg方式。进入font-awesome官网,下载free版本的库。在页面head标签中引入css。
小程序中使用font-awesome
m0_63419305的博客
03-12 1150
在小程序项目中使用Font Awesome
微信小程序使用Font Awesome
征途人生&梦
06-23 651
下载Font Awesome，然后解压到项目的static目录下。 修改css后缀为wxss 编辑font-awesome.wxss的字体目录 @font-face { font-family: 'FontAwesome'; src: url('/static/awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('/static/awesome/fonts/fontawesome-webfont.eot?#iefix&amp
微信小程序与font-awesome图标库
weixin_53035812的博客
08-10 399
本文为搬运学习,感谢原文大佬，原文地址:https://zhuanlan.zhihu.com/p/165568293 第一步：去官网下载font-awesome字体包font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 3392
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序fontawesome
09-05
微信小程序中使用FontAwesome图标的步骤如下： 1. 在微信小程序中新建一个文件，命名为stylesheet.wxss，并将stylesheet.css的代码粘贴到这个文件中。 2. 下载font-awesome的文件，并找到其中的font-awesome.css...
小程序·云开发实战：SCRM社交化客户管理小程序
qwefgh123321的专栏
01-16 3136
点击观看大咖分享 随着微信小程序不断发展壮大，传统的 CRM 厂商也在不断向微信上迁移，毕竟微信的背后是巨大的用户和流量，还有极其方便的移动支付渠道。用微信小程序来做CRM，和以前的做法存在一些比较明显的差异，主要包括这几个方面：用户的使用习惯不同、技术上的实现方式不同、运营方面的做法不同，所以，业内给这一类的 CRM 应用起了个新名字，叫做 Social CRM，简称 SCRM。 本期腾讯云大学...
简单横向图文排版商品介绍精彩活动展示店铺小程序源码.zip
10-05
9. **图标库**：源码可能会引入常见的图标库，如Font Awesome或Material Icons，以增强页面的视觉表现力。 10. **微信小程序API**：由于是店铺小程序，源码可能使用了微信提供的小程序开发API，以便与微信平台进行...
微信小程序开发常用的 1700 个 PNG小图标.zip
08-06
打包的微信小程序icon图标，下载解压即可用，其他的移动应用、网页开发也可以用。
惊！小程序也能引用font-awesome
CanMoHaiYan的博客
06-29 763
小程序引入外部字体文件教程 在这里插入代码片我们知道，字体图标有着许多优点，比如font-awesome、iconfont之类的字体图标库。首先它比位图图标使用起来方便很多，不会失真，图标颜色随便调，不言自喻它是咱们web前端的一大好伙伴！ 但当我们开发微信小程序时，也想引用font-awesome怎么办，小程序的样式表是wxss，直接修改font-awesome的后缀名？不不不，事情恐怕没那么简...
微信小程序里更简洁的使用使用fontawesome
qq_37422024的博客
11-09 1000
贴上源帖 原帖子 自己试了试原作者的办法后，是可以使用的，但是复制到开发者工具里之后，直接几百行有点不够舒服，所以想出的这个办法。 按照原作者的方法得到 stylesheet.css 和 font-awesome.css 之后，直接将扩展名改为‘.wxss后，在小程序根目录下新建一个“stylesheets”文件夹，将这两个文件放进来（也可按照自己的习惯放置） 最后在小程序app.wxs...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
美奇软件开发工作室
11-06 2013
一、通过阿里图标库生成iconfont.wxss 1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon 2、把需要的图标加入购物车，然后再添加到项目里 3、打开项目，选择“Font class”类型，点击下载至本地 二、创建icon组件 1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建...
【小程序】使用font-awesome字体图标的解决方案（图文）
【敦厚的曹操】的专栏
06-27 1万+
使用font-awesome字体图标的解决文案（图文）
微信小程序引用fontawesome字体
热门推荐
yiyingcsdn的博客
05-05 1万+
1.到fontawesome官网下载字体包。 2.打开1中下载的压缩包找到.ttf文件。 3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载. 4.打开3中下载的文件，找到stylesheet.css. 5.打开4中的文件，复制里面的代码到微信小程序中的app.wxss中。
vue3+ts开发微信小程序----使用FontAwesome图标的步骤（只适用于面性图标）
heavenz19的博客
04-25 898
因为用的vue3+ts 但是对于npm引进FontAwesome来说，好像对于小程序不支持，所以用了引入文件的方式。
微信小程序 图标库
weixin_30305735的博客
01-17 447
http://www.iconfont.cn/collections/detail?cid=29 转载于:https://www.cnblogs.com/asdf-0310/p/8301821.html
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值