微信小程序里更简洁的使用使用fontawesome

最新推荐文章于 2024-03-12 15:44:03 发布
原创 最新推荐文章于 2024-03-12 15:44:03 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #fontawesome #小程序使用fontawesome

本文介绍了一种在微信小程序中使用Font Awesome图标库的方法。通过更改文件扩展名为.wxss，并在小程序根目录创建'stylesheets'文件夹存放样式表，最后在app.wxss中导入，实现任意页面调用字体图标。

贴上源帖 原帖子

自己试了试原作者的办法后，是可以使用的，但是复制到开发者工具里之后，直接几百行有点不够舒服，所以想出的这个办法。

按照原作者的方法得到 stylesheet.css 和 font-awesome.css 之后，直接将扩展名改为‘.wxss后，在小程序根目录下新建一个“stylesheets”文件夹，将这两个文件放进来（也可按照自己的习惯放置）

最后在小程序app.wxss中添加

@import './stylesheets/fontawesome-transfonter.wxss';

@import './stylesheets/font-awesome.wxss';

在任意页面即可使用字体图标库

<text class="fa fa-camera-retro fa-lg"></text>

李白白Boom
关注
微信小程序开发：从0到1的奇妙之旅
邓邓子的博客
08-19 1657
本文是微信小程序开发初级入门指南，涵盖从注册到发布的全流程。先介绍在微信公众平台注册账号及获取 AppID 的要点，再说明开发工具的安装与功能。还讲解界面布局设计原则、代码编写基础（含 WXML、WXSS、JS）及官方资源利用，阐述调试测试方法与审核发布流程，为新手提供清晰步骤，助其快速入门，顺利开发并发布首个微信小程序。
识相Insight 图像识别微信小程序 AI图像识别 百度图像识别 微信小程序 微信小程序应用开发赛 产品文档 By:Autumnhui 丘天惠
丘天惠
06-03 1236
???? 代码开源，欢迎学习交流（大佬不要喷，自学JavaScript） ???? ⚠️ 拒绝一切将他人学习成果白嫖/盈利的行为 ⚠️ 如果对你有用，可以 ** Star✨** 一下 Insight 微信图像识别小程序 扫码体验 </center> # 一、产品概况 ## 1. 介绍与需求 ### 1.1 产品简介 识相 Insight 是一款免费的 **快速识别图像，获取相关知识，提升生活信息认知** 的小程序。产品通过利用人工智能的图像识别技术，对图像进行快速识
微信小程序—使用font-awesome图标库（图文）
Poppy_LYT的博客
08-21 3224
微信小程序—使用font-awesome图标库 第一步：去官网下载font-awesome字体包 font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
小程序中使用font-awesome
m0_63419305的博客
03-12 1592
在小程序项目中使用Font Awesome
font-awesome字体图标库在微信小程序中的使用
Y00010010的博客
04-21 1682
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
微信小程序中引用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.
微信小程序与font-awesome图标库
weixin_53035812的博客
08-10 426
本文为搬运学习,感谢原文大佬，原文地址:https://zhuanlan.zhihu.com/p/165568293 第一步：去官网下载font-awesome字体包font-awesome官网 下载完是一个压缩包，解压之后是这个亚子 第二步：找到红线圈出的ttf文件，并上传到这个网址 操作如下 第三步：convert下载完成之后是一个压缩包，解压之后是这个亚子 找到stylesheet.css文件并打开 我双击之后默认是hbuilder打开的，无所...
微信小程序开发常用的1600个PNG图标
03-08
在微信小程序的开发过程中，图标是提升用户体验和界面美观度的关键元素之一。这些"微信小程序开发常用的1600个PNG图标"集合提供了一个丰富的资源库，帮助开发者快速找到适合不同场景的图形元素，以创建专业且吸引人...
微信小程序的 fa 图标模块.zip
最新发布
08-30
微信小程序作为当下流行的移动端应用开发方式，它以简洁、高效的特点深受开发者喜爱。fa图标，也被称为Font Awesome图标，是一套广泛使用的图标字体，提供了丰富的图标资源，可以让开发者在网页或应用中轻松添加各种...
微信小程序前端图标资源包
由于微信小程序的用户界面和交互逻辑需要简洁明了，因此这些小图标往往设计得简洁而富有辨识度，以便用户能够快速识别。这些图标可以用于按钮、列表、卡片等各种UI组件，增强用户体验。 在前端开发中，图标通常通过...
微信小程序使用font-awesome图标库
03-29
网上看到的方法，亲测成功：参考方法 下载font-awesome字体包 打开Transfonter网站，上传字体fontawesome-webfont.ttf（理论其它文件格式也可以转换，并未尝试），选择base64编码，convert后下载 下载得到的包中有style文件，打开后获得以下代码，并对照font-awesome.css中的内容，加入到微信小程序的app.wxss文件中 @font-face { font-family: 'fa'; src: url([removed]AAEAAAANAIAAAwBQRkZUTXLOMI
微信小程序使用字体图标的方法
11-30
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标—>点击“添加入库”–>点击购物车进入购物车–>点击下载代码按钮。 点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容： 第二步：转换ttf文件 进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 4254
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序使用Font Awesome
征途人生&梦
06-23 833
下载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字体图标的解决方案（图文）
热门推荐
【敦厚的曹操】的专栏
06-27 3万+
使用font-awesome字体图标的解决文案（图文）
微信小程序使用Font Awesome 5
LYJSpeedX独家技术分享
04-28 571
网上找的教程都很复杂，绕来绕去的，结果不还是为了引入一个wxss 于是，我把在微信小程序使用font-awesome的最终版wxss给大家做好了 就一个文件，直接在app.wxss里@import就好 使用 /* app.wxss */ @import "css/font-awesome.wxss"; <!-- index.wxml --> <text class="fa fa-user" /> 下载 链接: https://pan.baidu.com/s/1S_vhm4Gzi9
微信小程序中使用iconfont/font-awesome等自定义字体图标
Calamus
04-02 2054
  小程序不能识别外部字体文件，但是转换成Base64就可以使用字体图标了。 以阿里巴巴的iconfont为例 1.下载图标 先去官网下载喜欢的图标==》 下载解压后的文件夹==》 2.在线转换 打开https://transfonter.org/这个网站，将ttf格式的图标文件转换为base64的 完成之后，下载 3.添加css文件 下载好之后的cs...
惊！小程序也能引用font-awesome
CanMoHaiYan的博客
06-29 837
小程序引入外部字体文件教程 在这里插入代码片我们知道，字体图标有着许多优点，比如font-awesome、iconfont之类的字体图标库。首先它比位图图标使用起来方便很多，不会失真，图标颜色随便调，不言自喻它是咱们web前端的一大好伙伴！ 但当我们开发微信小程序时，也想引用font-awesome怎么办，小程序的样式表是wxss，直接修改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中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值