微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】

这篇具有很好参考价值的文章主要介绍了微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序引入fontawesome

小程序引入fontawesome需要做的步骤是比其他的多一点,比如说本质上下载下来fontawsome没法直接用,他有好多的css,其实也有好多TTF的字体文件,对于他的这种 TTF的文件是需要给它进行一个转换,转换之后把它变成是比如说base64,它编码变成之后再把它引入到我们的项目中。

0、嫌麻烦直接跳转文末引入转好的

一、下载fontawesome6

https://fontawesome.com/download【被墙打不开进下面中文官网https://fontawesome.com.cn/,只有v5之前版本】

选择免费的Free for web 版本

微信小程序图标库,微信小程序,微信小程序,小程序

二、使用transfonter编码成Base64

​ 1.下载好解压,打开webfonts文件夹,一堆字体文件。

微信小程序图标库,微信小程序,微信小程序,小程序

​ 2.把全部字体(包括woff2后缀)上传到transfonter,打开Base64 encode,勾选TTF和WOFF2然后转换Convert

transfonter官网:https://transfonter.org/

微信小程序图标库,微信小程序,微信小程序,小程序

​ 3.转换好了下载,下载好了解压。只要stylesheet这个css就好

微信小程序图标库,微信小程序,微信小程序,小程序

三、微信小程序引入fontawesome

​ 1.记事本打开上一步解压的文件中的stylesheet.css,复制到小程序根目录,后缀记得改成**.wxss**(这边直接重命名成fontawesome.wxss

微信小程序图标库,微信小程序,微信小程序,小程序

​ 2.打开最开始下载解压完成的fontawesome6文件夹,css目录下的6个css样式(brands.css、fontawesome.css、regular.css、solid.css、svg-with-js.css、v4-shims.css)

微信小程序图标库,微信小程序,微信小程序,小程序

​ 3.分别用记事本打开这6个样式,全选复制粘贴追加至小程序引入的fontawesome.wxss后面,一个劲儿往里怼往里插就是了。

注意:值得一提的是凡是遇到@font-face里面‘ src: url("…/webfonts/。。。.woff2’酱色儿的直接删除

​ 上面选中的6个样式文件中有这3个里面有的需要删:

brands.css开头处

regular.css中间

solid.css中间

微信小程序图标库,微信小程序,微信小程序,小程序

​ 从transfonter转换好的csssheet加上6个样式全部复制进去差不多10000行

微信小程序图标库,微信小程序,微信小程序,小程序

四、测试效果

​ 1.在微信小程序的全局样式app.wxss导入根目录下的fontawesome.wxss

@import"/fontawsome.wxss"

微信小程序图标库,微信小程序,微信小程序,小程序

​ 2.从fontawsome官网找喜欢的图标测试一些噜~

微信小程序图标库,微信小程序,微信小程序,小程序

<text class="fa-brands fa-facebook"></text>
<text class="fa-regular fa-thumbs-down"></text>
<text class="fa-solid fa-moon"></text>
<text class="fa-regular fa-moon"></text>

微信小程序图标库,微信小程序,微信小程序,小程序

五、fontawesome懒人包-直接放进根目录,导入后直接用

下载

https://download.csdn.net/download/weixin_44229624/88191024

​ 写好的包是6.4.2版本,超过了的新图标用不了哦,记得筛选一下版本。
微信小程序图标库,微信小程序,微信小程序,小程序

fontawesome图标库:

​ https://fontawesome.com/search?o=r&m=free

打开链接是免费库(用v4,v5的都可以你能进哪个官网就用哪个),免费图标可能换个样式头顶多了pro标识那就不能用咯,用了小程序里也是个空框框~
微信小程序图标库,微信小程序,微信小程序,小程序
微信小程序图标库,微信小程序,微信小程序,小程序
有的奇奇怪怪的图标是免费但是好像用了也是没有效果(应该是最开始转换和引入css的问题),不过绝大部分都可以用上了。欢迎大佬们评论区补充。文章来源地址https://www.toymoban.com/news/detail-759010.html

到了这里,关于微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用自定义图标,使用阿里图标库教程

    1、去阿里图标库选择我们需要的图标并下载下来 贴一个阿里图标库的地址:iconfont-阿里巴巴矢量图标库 没有项目的自己创建一个就好了,添加进自己的项目里    点击第三步的链接打开后就是这样的 把里面的内容复制下来 在你微信小程序的项目里新建一个这样的文件, 把

    2024年02月09日
    浏览(53)
  • 微信小程序使用iconfont图标

    一、第一步进入iconfont网站 1.添加需要使用的图标,点击购物车图标加入项目   2.点击右上角的购物车按钮    3.点击添加项目按钮,选择一个项目添加即可,若没有项目,可以创建   4.添加完项目会自动跳转到下一个页面,点击font class 生成在线链接   5.复制生成的链接,去

    2024年02月08日
    浏览(65)
  • 微信小程序项目中使用icon图标

    效果: 步骤: 1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2、在小程序中使用 新建一个view,在上面加一个class,复制icon名字上去即可,注意格式,格式为iconfont icon名。 iconfont这个前缀不是固定的,根据icon名字来,icon的前缀为

    2024年02月11日
    浏览(57)
  • 微信小程序里使用SVG矢量图标方法

    微信小程序里使用SVG矢量图标有2种引入方法: 一、SVG图标转换为BASE64编码 可以在百度搜索’svg在线转BASE64’(可能会有问题,如下) 如下方式 同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放 二、使用运程地址引入SVG图标 把SVG图标上传到网站服务器

    2024年02月05日
    浏览(52)
  • 微信小程序中使用字体图标,解决字体图标包过大的问题

    在微信小程序开发中,我们经常使用字体图标来美化界面和展示各种功能。然而,当我们的小程序主包大小超过2M时,可能会遇到一个问题:字体图标的文件很大,导致整个包的大小超出了限制。为了解决这个问题,我们可以使用wx.loadFontFace方法来远程加载字体图标。 步骤一

    2024年02月12日
    浏览(75)
  • 【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)

    优点:操作方便,支持多彩图标 缺点:会增加源代码大小 下载 svg 格式的图标图片,放入源码中使用 小程序项目中的路径为 assetsicon美食.svg 优点:不会增加源代码大小 缺点:不支持多彩图标,更新比较麻烦 将图标添加到自己的图标项目中后,生成对应的 css 链接 浏览器打

    2024年02月11日
    浏览(44)
  • 原生微信小程序中使用-阿里字体图标-详解

    1、打开阿里巴巴矢量图标库 网址:iconfont-阿里巴巴矢量图标库 2、搜索字体图标,鼠标悬浮点击添加入库  3、按如下步骤添加到自己的项目   进入微信开发者工具 1、创建 fonts文件夹 iconfont.wxss 文件,将刚才的代码复制进去 2、在 app.wxss文件 中引入路径 3、在页面中使用  

    2024年02月04日
    浏览(60)
  • 微信小程序weui的引入及使用

    提示:这种方式引入的组件将不计入代码包的大小 微信基础库在2.2.1 以上(包含)可以直接在app.json 里面配置就可以 在使用组件的页面的 json 文件加入 usingComponents 配置字段 引用 进入小程序项目根目录,执行命令 npm init 创建 package.json 文件 注意:一开始是没有的 package.js

    2024年02月03日
    浏览(62)
  • 微信小程序 使用 echarts symbol属性不能使用自定义图标

      当我想去给 symbol  属性自定义图标时,控制台就报错 Image  is not defined !!! 原因是因为微信小程序不支持  new image() ; 下列就是echarts.js 源码,版本不同格式化后显示的 function 命名有所不同。但是全局就只有这么一个 new image ;全局搜一下就好 !!! 全局定义 canvas

    2024年02月13日
    浏览(62)
  • 微信小程序使用npm引入三方包详解

    1 前言 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。 2 微信小程序npm环境搭建

    2024年02月11日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包