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

最新推荐文章于 2024-10-04 12:08:21 发布
最新推荐文章于 2024-10-04 12:08:21 发布
阅读量3w 收藏 7
点赞数 3
分类专栏： 前端 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abczdefg/article/details/54407526
版权
本文介绍了如何在微信小程序中使用Font Awesome图标库，通过Transfonter网站将字体转换为base64编码，下载文件后在小程序的全局配置中引入，并修改字体名称，最后在小程序组件中直接调用图标类名实现展示。
摘要由CSDN通过智能技术生成
微信小程序使用font-awesome图标库

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

  1. 下载font-awesome字体包

    font-awesome字体包

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

最低0.47元/天 解锁文章
abczdefg
关注
专栏目录
微信小程序—使用font-awesome图标库（图文）
Poppy_LYT的博客
08-21 2750
微信小程序—使用font-awesome图标库 第一步：去官网下载font-awesome字体包 font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
font-awesome字体图标库在微信小程序中的使用
Y00010010的博客
04-21 1429
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
微信小程序：字体图标的使用
最新发布
听海边涛声
10-04 456
微信小程序：字体图标的使用
微信小程序与font-awesome图标库
weixin_53035812的博客
08-10 372
本文为搬运学习,感谢原文大佬，原文地址:https://zhuanlan.zhihu.com/p/165568293 第一步：去官网下载font-awesome字体包font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
vue3+ts开发微信小程序----使用FontAwesome图标的步骤（只适用于面性图标）
heavenz19的博客
04-25 849
因为用的vue3+ts 但是对于npm引进FontAwesome来说，好像对于小程序不支持，所以用了引入文件的方式。
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 2762
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序使用font-awesome
01-27
微信小程序使用font-awesome图标库 下载font-awesome字体包 打开网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载 下载得到的包中有style文件，打开...
微信小程序使用font-awesome.zip
01-11
"微信小程序使用font-awesome.zip"这个压缩包文件，显然涉及到在微信小程序中集成`Font Awesome`图标库的使用。 `Font Awesome`是一个广泛使用的图标库，提供了大量的矢量图标，可以方便地用于网页和应用程序的界面...
微信小程序中如何使用fontawesome6的免费图标
ShadowSun的专栏
10-17 1160
一、官网下载fontawesome6二、使用transfer编码成Base64首先先把刚刚下载的fontawesome6解压，将文件夹中的字体上传（点击“Add fonts”按钮）到transfonter，打开再点击Download下载即可，将刚刚下载的文件解压，得到如下文件目录。
【小程序】使用font-awesome字体图标的解决方案（图文）
【敦厚的曹操】的专栏
06-27 4282
使用font-awesome字体图标的解决文案（图文）
微信小程序开发常用的1600个PNG图标
03-08
微信小程序开发常用的1600个PNG图标
【愚公系列】2022年08月 微信小程序-icon图标详解
热门推荐
时光隧道
07-30 55万+
在小程序中经常会用到各种各样的图标，如果这些图标都使用图片的话，将会大大增加小程序打包后的体积，而小程序限制代码最大2MB，分包加载4MB，所以为了缩小体积，我们可以使用图标来缩小体积。自带图标外部图标（图片、精灵图、CSS绘图、矢量字体、SVG格式）属性类型默认值必填说明最低版本typestring是。
小程序支持fontawesome网络字体显示
caixiaoxun的专栏
05-16 720
1、官网下载fontawesome字体。 2、解压得到 3、将fontawesome-webfont.ttf上传至https网络目录 4、将font-awesome.css改名为font-awesome.wxss放至小程序资源目录 5、app.wxss增加字体资源加载引用 @font-face { font-family: 'FontAwesome'; src: url("https://www.xxx.com/xxx/fontawesome-webfont.ttf") f
微信小程序项目中使用icon图标
分享互联网的有趣知识~
12-12 3816
iconfont这个前缀不是固定的，根据icon名字来，icon的前缀为my-icon-xxxx，那么前缀就是 my-icon。新建一个view，在上面加一个class，复制icon名字上去即可，注意格式，格式为iconfont icon名。没有前缀或者设置了前缀，一般都是使用iconfont，根据项目视情况而定，这里以my-icon举例。my-icon my-icon-fontxxx
微信小程序中引用FontAwesome字体
大白能的博客
08-03 1万+
1.到Font Awesome官网下载字体包官网链接:Font Awesome中文官网2.打开1中下载的压缩包找到.ttf文件如下图所示: 3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载如下图所示: 下一步 4.打开3中下载的文件，找到stylesheet.css5.在桌面新建一个fontAwesome.wxss文件6.
微信小程序引用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中。
微信小程序使用字体图标
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
微信小程序中使用iconfont/font-awesome等自定义字体图标
Calamus
04-02 1957
  小程序不能识别外部字体文件，但是转换成Base64就可以使用字体图标了。 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==》 下载解压后的文件夹==》 2.在线转换 打开https://transfonter.org/这个网站，将ttf格式的图标文件转换为base64的 完成之后，下载 3.添加css文件 下载好之后的cs...
微信小程序集成Font Awesome图标教程：从下载到应用详解
在微信小程序开发中，引入Font Awesome图标是一项常见的美化和增强用户体验的功能。Font Awesome是一个流行的开源图标库，提供了丰富的矢量图形，可用于各类UI设计。以下是详细介绍如何在微信小程序中集成Font ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值