当前位置: 开发笔记 > 后端 > 正文

微信小程序中引用FontAwesome字体最完整教程附下载源码

作者：jzb5485414 | 来源：互联网 | 2023-06-01 13:50

目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼主要步骤,下载转码合并样式引用样式,不会的可下载源码1.到FontAwesome官网下载字体包官网

目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼
主要步骤,下载>转码>合并样式>引用样式,不会的可下载源码

1.到Font Awesome官网下载字体包

官网链接:Font Awesome中文官网

2.打开1中下载的压缩包找到.ttf文件

如下图所示:
在这里插入图片描述

3.上传2中的字体文件到https://transfonter.org/&＃xff0c;选择base64 编吗 &＃xff0c;convert后下载

如下图所示:
在这里插入图片描述

下一步
在这里插入图片描述

4.打开3中下载的文件&＃xff0c;找到stylesheet.css,

拷贝到小程序,只需要拷贝css样式文件,其他都不需要.

5.在桌面新建一个fontAwesome.wxss文件

6.打开4中的文件&＃xff0c;复制里面的代码到5中的新建的fontAwesome.wxss文件中 stylesheet.css代码如下: 图片中已经把图标文件转成64位字符了.

复制到fontAwesome.wxss中:

7.打开1中的文件font-awesome.css,复制里面的css(去掉&＃64;font-face部分)到新建的fontAwesome.wxss文件中

&＃xff08;接着6中复制内容的后面&＃xff09;
font-awesome.css如下: 这个步骤比较关键.意思就是除了路径之外的样式文件都拷贝过来.

打开文件:

复制其余部分到fontAwesome.wxss
其实就是把两个css文件拼接起来就好了.
上面来自font-awesome.css
下面来自stylesheet.css 这步很关键,很多人就是错失了这一步,导致失败.

8.然后引入小程序中直接用就可以了

小程序需要引用的文件就一个.

Loading... Loading... Loading... Loading...

效果如下不错吧,关注 28找群 公众号更多惊喜.

推荐阅读

图片
微信小程序打开红包的css_【微信小程序】——wxss引用外部CSS文件及iconfont

小程序引入外部文件的方式是：import**.wxss;因为业务需要，正在开发的小程序中需要使用iconfont，很容易想到了H5的引 ... [详细]

蜡笔小新 2023-10-13 13:30:45
图片
响应式页面的概述和实现方式

本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]

蜡笔小新 2023-12-11 12:37:10
go
如何压缩网站页面以减少页面加载时间

本文介绍了影响网站打开时间的两个因素，即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法，并推荐了相应的压缩工具。此外，还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]

蜡笔小新 2023-12-09 09:17:00
go
request:fail错误（含https解决方案）（真机预览问题）

问题描述：域名已经备案，我全部都有，也在后台配置了，但是手机预览，还是请求失败，PC端是可以请求 ... [详细]

蜡笔小新 2023-10-17 12:10:29
go
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
go
HTML学习02 图像标签的使用和属性

本文介绍了HTML中图像标签的使用和属性，包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项，帮助读者更好地理解和应用图像标签。 ... [详细]

蜡笔小新 2023-12-13 11:31:26
go
小程序自动授权和手动接入的方式及操作步骤

本文介绍了小程序支持的两种接入方式：自动授权和手动接入，并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换，以及手动接入后如何下载代码包和提交审核。 ... [详细]

蜡笔小新 2023-12-11 18:21:09
go
统一知识图谱学习和建议：更好地理解用户偏好

本文介绍了一种将知识图谱纳入推荐系统的方法，以提高推荐的准确性和可解释性。与现有方法不同的是，本方法考虑了知识图谱的不完整性，并在知识图谱中传输关系信息，以更好地理解用户的偏好。通过大量实验，验证了本方法在推荐任务和知识图谱完成任务上的优势。 ... [详细]

蜡笔小新 2023-12-11 11:11:02
go
Windows7企业版怎样存储安全新功能详解

本文介绍了电脑公司发布的GHOST WIN7 SP1 X64 通用特别版 V2019.12，软件大小为5.71 GB，支持简体中文，属于国产软件，免费使用。文章还提到了用户评分和软件分类为Win7系统，运行环境为Windows。同时，文章还介绍了平台检测结果，无插件，通过了360、腾讯、金山和瑞星的检测。此外，文章还提到了本地下载文件大小为5.71 GB，需要先下载高速下载器才能进行高速下载。最后，文章详细解释了Windows7企业版的存储安全新功能。 ... [详细]

蜡笔小新 2023-12-10 14:45:37
go
微信小程序导航跟随的实现方法

本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件，可以实现页面向下滚动到导航位置时，导航固定在页面最上方；页面向上滚动到导航位置时，导航恢复到原始位置；点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]

蜡笔小新 2023-12-09 19:38:28
package
微信民众号商城/小顺序商城开源项目介绍及使用教程

本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目，包括前端和后端的目录结构，以及所使用的技术栈。同时提供了项目的运行和打包方法，并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接，以及加入前端交流QQ群的方式。 ... [详细]

蜡笔小新 2023-12-09 08:45:47
package
使用flex弹性布局来为微信小程序写自适应页面

我们知道，写习惯了前端的人，一般切图后布局页面的话，上手最习惯的是基于盒子模型的浮动布局，依赖display属性positi ... [详细]

蜡笔小新 2023-10-17 17:06:23
go
校园表白墙微信小程序，校园小情书、告白墙、论坛，大学表白墙搭建教程

小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]

蜡笔小新 2023-10-17 13:53:34
go
实例详解CSS3实现弹幕

项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到 ... [详细]

蜡笔小新 2023-10-17 12:33:46
go
小程序服务器获取用户名头像,微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现...

这个接口只能获得一些非敏感信息，例如用户昵称，用户头像，经过用户授权允许获取的情况下即可获得用户信息，至于openid这些& ... [详细]

蜡笔小新 2023-10-15 16:44:04

jzb5485414

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章