微信小程序中引用FontAwesome字体 最完整教程 附下载源码
目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼
主要步骤,下载>转码>合并样式>引用 样式,不会的可下载源码
1.到Font Awesome官网下载字体包
官网链接:Font Awesome中文官网
2.打开1中下载的压缩包找到.ttf文件
如下图所示:
3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载
4.打开3中下载的文件，找到stylesheet.css,
拷贝到小程序,只需要拷贝css样式文件,其他都不需要.
5.在桌面新建一个fontAwesome.wxss文件
6.打开4中的文件，复制里面的代码到5中的新建的fontAwesome.wxss文件中 stylesheet.css代码如下: 图片中已经把图标文件转成64位字符了.
复制到fontAwesome.wxss中:
7.打开1中的文件font-awesome.css,复制里面的css(去掉@font-face部分)到新建的fontAwesome.wxss文件中
（接着6中复制内容的后面）
font-awesome.css如下: 这个步骤比较关键.意思就是除了路径之外的样式文件都拷贝过来.
打开文件:
复制其余部分到fontAwesome.wxss
其实就是把两个css文件拼接起来就好了.
上面来自font-awesome.css
下面来自stylesheet.css 这步很关键,很多人就是错失了这一步,导致失败.
8.然后引入小程序中直接用就可以了
小程序需要引用的文件就一个.
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span><i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span><i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
效果如下 不错吧,关注 28找群 公众号 更多惊喜.
微信小程序中引用FontAwesome字体 最完整教程 附下载源码相关推荐
- 微信小程序中引用FontAwesome字体
1.到Font Awesome官网下载字体包 官网链接:Font Awesome中文官网 2.打开1中下载的压缩包找到.ttf文件 如下图所示: 3.上传2中的字体文件到https://transfo ...
- 基于java SSM框架+微信小程序实现电子书城阅读器演示【附项目源码+论文说明】分享
基于java SSM框架+微信小程序实现电子书城阅读器演示 摘要 而随着互联网技术的不断发展,互联网已经渗入到我们生活中的各个方面.移动设备的普及使我们的生活发生了翻天覆地的变化,这种变化也深刻影响着 ...
- 基于java SSM框架+微信小程序实现电子书城阅读器演示【附项目源码+论文说明】
基于java SSM框架+微信小程序实现电子书城阅读器演示 摘要 而随着互联网技术的不断发展,互联网已经渗入到我们生活中的各个方面.移动设备的普及使我们的生活发生了翻天覆地的变化,这种变化也深刻影响着 ...
- 基于SSM框架+微信小程序实现大学生二手闲置物品交易平台演示【附项目源码+论文说明】
基于SSM框架+微信小程序实现大学生二手闲置物品交易平台演示 摘要 而随着互联网技术的不断发展,互联网已经渗入到我们生活中的各个方面.移动设备的普及使我们的生活发生了翻天覆地的变化,这种变化也深刻影响 ...
- 基于微信小程序实现警务活动管理系统设计演示【附项目源码+论文说明】分享
基于微信小程序实现警务活动管理系统设计演示 摘要 随着我国经济迅速发展,人们对网络管理的需求越来越大,各种系统也越来越多,由于微信的发展,微信的功能越来越齐全,越来越多的人开始使用微信.因此,特开发了 ...
- 微信小程序中引入ttf字体
微信小程序中引入ttf字体 解决常规引入ttf不生效问题 第一步:将ttf字体转为base64(转码网址:https://transfonter.org) 第二步:在static文件夹下新增font文 ...
- 基于微信小程序共享停车位设计与实现SSM_car.rar（项目源码+数据库文件+微信小程序开发+后端java语言）
主要功能实现了共享车位的创建,车位的管管理,创建车辆.车辆的管理.附近车位.显示车位的编号,车位的位置,车位的状态,车位.可以查看订单记录车位.停费时间,确认时间计费的时间.可以删除,订单也可以确认是 ...
- 如何在微信小程序中使用.ttf字体
在小程序内,不支持使用 webfont 的 @font-face 引入本地的 ttf 等文件,这时候需要使用线上地址或者 base64. 第一步: 在阿里的iconfont中找到自己想要的字体加入购物 ...
- 基于微信小程序的英语单词记忆系统的设计与实现(论文+源码)_kaic
摘 要 当前时期,国内的经济获得了非常快速的发展,互联网技术在持续的创新和完善,教育教学方面也在不断的进步,教育全面深化改革在发展,并且移动互联网技术在教育领域获得了大量的实践以及应用.语言的全球化 ...
最新文章
- Quartz.Net 1.30的一些设置说明
- csgo国服文件转国际服务器,csgo国际服怎么转国服 csgo国际服转到国服方法介绍...
- 经典C语言能力测试题（值得一看）
- 第四届“传智杯”全国大学生IT技能大赛（决赛B组）【题解】
- 建筑电气工程设计常用图形和文字符号_建筑水电图纸看不懂？10年老师傅教你看图技巧，分分钟安排...
- eclipse查看git地址_在 IntelliJ IDEA 中使用 Git，太方便了
- Spring Boot Actuator监控端点小结
- 图解CNN十大算法架构
- java判断字符是否为0_Java判断字符串是否为空
- 证明 总偏差平方和 = 回归平方和 + 残差平方和
- 刚装好的mysql设置密码_第一次装好mysql后要设置密码
- 如何解决：微云下载文件总是下载失败
- Linux系统Centos7的虚拟机安装
- 无法打开计算机开始菜单,开始菜单,教您开始菜单无法打开
- C语言动态规划和文件操作练习——通讯录
- 【论文速递】-2022-金融研究-系统性金融风险文献综述：现状、发展与展望
- 下载漫画网站图片示例
- cmd 命令行执行 Python 脚本
- 中兴光猫F460 V3.0破解，断了电信的远程管理,禁止电信光猫外网登录超级管理员,有效去除被黑的烦恼...
- Qlik Sense中处理SQL语句的流程