原生微信小程序引入离线iconfont字体图标

最新推荐文章于 2023-12-01 11:02:02 发布
最新推荐文章于 2023-12-01 11:02:02 发布
阅读量616 收藏 2
点赞数 2
文章标签： 微信小程序 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15064263/article/details/126396051
版权

文章目录

1.进入官网，下载文件

进入iconfont官网

iconfont官网地址

把自己需要的字体图标添加到购物车

在这里插入图片描述

把购物车的图标添加进项目

在这里插入图片描述

接着把字体图标下载到本地

在这里插入图片描述

下载之后解压出来，主要使用这两个

在这里插入图片描述

把iconfont文件内容全部复制到微信小程序中

  • 本人在assets>iconfont内创建一个叫iconfont.wxss的文件，把下载下来的文件夹内的iconfont.css内容全部复制进入iconfont.wxss

在这里插入图片描述

把解压后的ttf文件通过工具转换成base64

  • 点击ttf=>base64进入ttf转换base64网站
  • 勾选这些之后点击Add fonts选中解压后的iconfont.ttf文件

在这里插入图片描述

  • 完成之后点击convert
    在这里插入图片描述
  • 等待几秒后会出现Download 并点击下载
    在这里插入图片描述
  • 下载完之后会得到一个这样的目录

在这里插入图片描述

打开stylesheet.css，复制内容并粘贴到iconfont.wxss上

  • 把stylesheet.css全选复制并替换红色这一块
  • 在这里插入图片描述在这里插入图片描述
  • 替换之后的iconfont.wxss
  • 在这里插入图片描述

替换完之后再找到app.wxss引入处理完的iconfont.wxss文件

在这里插入图片描述

最后就可以再页面使用

在这里插入图片描述

代码の搬运工
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序开发中的数据缓存和离线存储
吃不胖.
05-10 371
/ 将数据存入数据库 db.collection('collection').add({ data: { key: 'value' }, success: function(res) { console.log(res._id);// 从数据库中获取数据 db.collection('collection').get({ success: function(res) { console.log(res.data);微信小程序开发中，数据缓存和离线存储是非常重要的功能，可以提升小程序的用户体验。
原生微信小程序源码 - -豆瓣电影
05-01
"原生微信小程序源码 - -豆瓣电影"这个标题表明这是一个关于微信小程序的项目，其主要功能是实现与豆瓣电影相关的服务。原生指的是源码是使用微信小程序官方支持的语言和框架开发的，没有依赖任何第三方库或框架，...
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 4957
在微信小程序中使用iconfont图标的方法
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3678
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2369
略
在小程序中使用iconfont
DargonWisdom的博客
08-10 3863
小程序使用iconfont的使用
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 666
微信小程序引入 iconfont 矢量图标（Font class ）;
原生微信小程序源码，生鲜商城
07-05
原生微信小程序是一种基于微信平台开发的应用，它利用微信提供的开发工具和框架，可以构建出运行在微信内的轻量级应用。在这个特定的项目中，我们关注的是一个专门用于生鲜电商的微信小程序源码。这样的小程序通常...
微信小程序引入Vant组件库过程解析
11-30
微信小程序是一种轻量级的...通过以上步骤，你就可以在微信小程序中顺利地引入和使用 Vant Weapp 组件库，提升开发效率，创建出更加专业和美观的用户界面。记得在实践中不断探索和学习，以便更好地掌握这个强大的工具。
原生微信小程序源码 - -商城
最新发布
05-01
原生微信小程序是指完全遵循微信小程序官方开发框架的小程序，不依赖任何第三方库或工具，直接使用微信提供的API和组件进行开发。这样的小程序性能最佳，能充分利用微信环境的优势，提供流畅的用户体验。 【商城...
原生微信小程序源码 - -果库
05-01
总结：果库原生微信小程序源码是一个综合性的学习资源，涵盖了微信小程序开发的各个方面，包括界面设计、数据管理、网络通信、用户体验优化等。通过对源码的深入研究，开发者可以提升自己的小程序开发技能，同时也能...
微信小程序引入iconfont图标
新疆程序猿的角落
01-06 569
微信小程序引入iconfont图标
微信小程序引入iconfont
qq_39920109的博客
08-05 2616
微信小程序如何引用阿里iconfont图标库？ 1、进入阿里iconfont官网 https://www.iconfont.cn/；新建一个自己的项目，导入自己需要的icon。 2、将项目里的icon库下载至本地、解压。 3、打开https://transfonter.org/，来转换 ttf 。 点击Add fonts，上传iconfont.ttf。 4、勾选上 Family support , Base64 encode, TTF 三个选项, 点击 “Convert” 进行转化, 然后 “Down
小程序引入iconfont字体图标
janyxh的博客
09-18 1558
1.挑选图标，加入项目 2.进入项目，下载到本地 3.解压文件后，复制iconfont.css放到小程序项目里，并重命名，修改为iconfont.wxss。并在app.wxss内引入该样式。 @import "iconfont.wxss"; /* 修改成你放置样式文件的路径 */ 4.复制在线链接代码，替换iconfont.wxss里的@font-face样式。 5.打开wxml文件，写一行代码，格式如下。 <text class="iconfont icon-jiaguanzhu"&
微信小程序中使用iconfont图标
coding...
10-29 7572
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
微信小程序里使用iconfont
小蓝人的博客
07-28 948
3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face。注微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用。2、解压缩，将其中的.ttf字体格式文件进行转化。4、在app.wxss中引用iconfont。将iconfont.ttf字体文件上传，1、下载fontClass版图标。...
原生小程序实现阿里iconfont图标显示(保姆级图文)
请叫我欧皇！的博客
10-17 453
8、把stylesheet.css和之前在阿里图标库下载的iconfont.css直接拷贝到原生小程序的文件夹中（任意文件夹都可以，这俩文件之后要删除的）9、在项目页面的wxss文件中，把stylesheet.css的所有直接复制到wxss中，把iconfont.css文件除了。2、在阿里图标库选择自己需要的iconfont样式，只后点击加入购物车。3、点击右上角购物车图标后点击下载代码。5、点击右键解压该文件，文件如下。7、解压转码后的压缩包文件如下。4、代码下载完毕后如下文件。
原生小程序 之引入 icon字体图标
weixin_47409897的博客
05-18 615
目录原生小程序 之引入 icon字体图标字体图标的配置 原生小程序 之引入 icon字体图标 icon官网 01：挑选对应的字体图标 02：添加入项目 ( 需要 自己创建一个项目 ) 03：点击下载到本地 04：下载好的字体图标解压之后，再进行后续的配置使用 字体图标的配置 01：再 static / css / icon.wxss 文件 （ 新建 icon.wxss） 02：把 解压好的 iconfont.css 里面的样式 copy到 icon.wxss之中 @font-face { f
如何开发原生微信小程序？
12-15
开发原生微信小程序需要掌握以下几个方面的知识： 1.微信小程序开发框架：小程序开发框架是一套基于MVVM模式的框架，主要包括WXML、WXSS、JS和JSON四个部分，其中WXML和WXSS用于页面的结构和样式，JS用于页面的逻辑...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码の搬运工

记录学习，记录认知，记录。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值