微信小程序使用font awsome图标库（最新fontawsome5）

最新推荐文章于 2023-08-08 20:55:55 发布
最新推荐文章于 2023-08-08 20:55:55 发布
阅读量894 收藏
点赞数
分类专栏： 程序语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyou625/article/details/111027890
版权
本文档介绍了如何在微信小程序中使用Font Awesome 5图标库，包括从官网下载最新版本、通过Transfonter转换字体文件、将CSS内容复制到wxss文件以及在app.wxss中引入和配置样式的过程。
摘要由CSDN通过智能技术生成

本文档为个人博客文档系统的备份版本、作者：小游、作者博客：点击访问

1.先去官网下载 我们下载最新版的
http://fa5.dashgame.com/#/

我们进入webfont的文件夹，上传字体到这个网站：https://transfonter.org/

我们用下面这个

最后得到的内容

我们只需要css文件就可以了
把里面的文件自己复制到wxss文件里面

找到在font-awesome下载的文件里的font-awesome.css文件，并和第四步同样的操作：在微信小程序里新建一个font-awesome.wxss的文件，并粘贴font-awesome.css的代码<

最低0.47元/天 解锁文章
小游66
关注
专栏目录
微信小程序使用Font Awesome 5
LYJSpeedX独家技术分享
04-28 393
网上找的教程都很复杂，绕来绕去的，结果不还是为了引入一个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
让qml-bootstrap也可以通过名称引用最新的Font Awesome 5字体
05-08 457
这两天在尝试给qml-bootstrap用上最新的FontAwesome5字体时，发现需要同时更新用来定义图标名称与Unicode对应关系的js文件。 为了能够省避免手动录入的尴尬局面，跌跌撞撞地实现了这个半自动化的过程。 1. 浏览器打开https://fontawesome.com/cheatsheet?from=io，查看并复制对应的html元素； 2. 利用在线工具，将html 元素...
【小程序】使用font-awesome字体图标的解决方案（图文）
【敦厚的曹操】的专栏
06-27 4173
使用font-awesome字体图标的解决文案（图文）
微信小程序如何使用fontawesome字体库？
weixin_34413065的博客
09-07 288
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
最新发布
weixin_44229624的博客
08-08 2604
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
font-awesome-v5-icons：Font Awesome v5图标列表（纯JS数组）
02-05
字体真棒v5图标 返回Font Awesome v5图标的实际列表（纯JS数组） 安装 $ npm install --save font-awesome-v5-icons 用法 const faIcons = require ( 'font-awesome-v5-icons' ) ; faIcons . getList ( ) . then ( icons => console . log ( icons . length ) ) ; //=> 875 faIcons . getList ( ) . then ( icons => console . log ( icons [ 0 ] )
freecodecamp小项目---个人网站
神以灵的博客
05-06 3240
这个简陋的网站只用了html和css效果； 项目效果： html代码： JZX WebPage  jzx about interests contact WHO AM I My name is jzx.I'm studying in ZhongBei University now. My hometown is a small city named SuiN...
asp.net core bootstrap-table fontawesome5部分图标不显示
一根火柴博客
03-28 487
解决方法：fontawesome4 和5 同时引用 https://xoyozo.net/Blog/Details/Font-Awesome-5-Some-icons-do-not-appear
Font Awesome v5.9.0 Pro.zip
08-22
字体图标，做前端不错的选择。专业版，没有rp文件图标只有自己去官网查询了
Fontawesome_v5.3.1矢量图更新部分
09-26
找不到5.3.1的rplib文件，自己手动更新的。注意！！不是5.3.1的全部矢量图，是基于上一个版本更新补充的图。
font awesome
09-17
Font Awesome, 为 Bootstrap 而创造的图标字体
FontAwesome v5.7.2字体图标元件库(Free版)
04-03
FontAwesome v5.7.2字体图标元件库(Free版），可以直接使用在axure上
FontAwesome v5.7.2字体图标元件库(Free版).rplib
08-11
学习Axure原型设计的必备工具，是使用图标文字的基础。
微信开源库整理
懒洋洋的微博
03-10 352
微信小程序必学项
element-ui及第三方图标库font-awesome的安装使用
W2398439780的博客
10-25 1862
npm install element-ui 安装。下载的组件都被放在了node_modules下面。终端 ctrl+c 输入Y ，回车终止项目。把要使用的控件的代码粘贴下来。可以看见自动添加了相关依赖。导入注册就能够使用了。
扩展 layui icon 图标库 为 阿里图标库或Font Awesome
IBean的博客
10-22 9489
扩展 layui icon 图标库 为 阿里图标库或Font Awesome
使用Font-Awesome图标字体库
weixin_39854011的博客
02-24 1923
方法一，在vue +Element 的项目中直接安装、使用Font-Awesome图标字体库： 1、 安装font-awesome： 2、在main.js中引入： import ‘font-awesome/css/font-awesome.css’ 在组件中使用 .<template> <div> 微信：<span class="fa fa-wechat "></span> </div> </template> 也可以直
swiper的swiper-slide间隔
07-28
根据引用\[1\]中的描述，修改`slidesPerView`属性可以修改`swiper-slide`的宽度，但不能直接修改`swiper-slide`之间的间隔距离。如果你想要修改间隔距离，可以尝试使用CSS来调整样式。你可以通过设置`margin`或`padding`属性来改变`swiper-slide`之间的间隔距离。 另外，根据引用\[2\]和引用\[3\]中的代码，你可以看到在Vue.js中使用`vue-awesome-swiper`组件时，可以通过设置`slidesPerView`属性来控制`swiper-slide`之间的间隔距离。在引用\[2\]中的代码中，`swiperOption`对象中的`slidesPerView`属性被设置为`3.08`，这将影响`swiper-slide`之间的间隔距离。你可以根据需要调整这个值来改变间隔距离。 总结起来，如果你使用的是`vue-awesome-swiper`组件，可以通过设置`slidesPerView`属性来调整`swiper-slide`之间的间隔距离。如果你使用的是其他版本的Swiper，你可以尝试使用CSS来调整间隔距离。 #### 引用[.reference_title] - *1* [原来swiper的这个swiper-slide的间距调的这儿！](https://blog.csdn.net/m0_65292523/article/details/126361315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [swiper、vue-awsome-swiper插件使用](https://blog.csdn.net/weixin_43123984/article/details/126877867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [swiper2 swiper-slide 之间的间距调整](https://blog.csdn.net/weixin_30625691/article/details/98935677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值