微信小程序引入字体图标

最新推荐文章于 2024-07-17 17:22:13 发布
最新推荐文章于 2024-07-17 17:22:13 发布
阅读量83 收藏
点赞数 2
分类专栏： 微信小程序项目 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43792295/article/details/140446151
版权

1. 打开阿里巴巴字体图标网站

地址：https://www.iconfont.cn/?spm=a313x.collections_index.i3.d4d0a486a.46593a81qm01fV

2.添加入库

在这里插入图片描述

3. 添加⾄项⽬

在这里插入图片描述
添加到具体的项目
在这里插入图片描述

4.将样式代码复制到项目

上一步中点击确认后会自动跳转到当前项目，或者是点击【资源管理】–》【我的项目】
在这里插入图片描述
如下图获取样式代码链接，点击【Font Class】–》【查看在线链接】–》【点击复制代码】
在这里插入图片描述
打开复制的链接
在这里插入图片描述
将代码复制到项目中
在这里插入图片描述

5.小程序引入和使用

在全局wxss文件中引入
在这里插入图片描述
在具体页面的wxss中使用
在这里插入图片描述
使用的样式中的如下属性。
在这里插入图片描述
效果如下：
在这里插入图片描述

浪出@一片天
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序使用字体图标的方法
11-30
在微信小程序中使用字体图标，通常需要遵循一系列步骤，这些步骤与传统的Web前端开发有所不同。...通过以上方法，开发者可以方便地在微信小程序中引入和使用各种字体图标，丰富用户界面的视觉效果。
微信小程序 如何引入外部字体库iconfont的图标
08-28
在微信小程序中引入外部字体库，特别是像Iconfont这样的图标库，可以极大地丰富小程序的图形元素，提升用户体验。本文将详细介绍如何在微信小程序中引入并使用Iconfont图标。 首先，你需要访问阿里巴巴矢量字体库...
微信小程序引入字体图标（阿里iconfont）
蜡笔小星的博客
08-27 828
微信小程序引入阿里字体图标方法总结1 阿里iconfont官网选择自己需要的图标2 将.ttf格式的字体文件转换为base643 把转换后的.css文件和原来的.css文件中的代码拼接，复制到微信小程序相应的.wxss文件中 方法总结 1 阿里iconfont官网选择自己需要的图标 阿里字体官网点击即可进入 选择需要的图标 下载至本地 打开下载好的压缩包 2 将.ttf格式的字体文件转换为base64 转换base64点此进入 下载转换好的文件至本地 打开文件夹如下图 3 把转换
微信小程序使用字体图标——链接引入
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
07-13 2784
【代码】微信小程序使用字体图标——链接引入。
uniapp微信小程序项目引入字体图标
weixin_64630359的博客
03-21 481
【代码】uniapp微信小程序项目引入字体图标。
微信小程序引入iconfont图标
新疆程序猿的角落
01-06 569
微信小程序引入iconfont图标
如何在微信小程序中使用字体图标
单眼皮的小熊
10-14 5212
方法一：将字体url转换为base64的格式后使用 　　第一步，下载需要的字体图： 　　打开阿里巴巴矢量图标库，选择自己需要的图标添加到购物车，然后点击购物车下载代码： 　　第二步，转换iconfont.ttf文件为base64格式： 　　然后将下载的包解压，你会看到一个格式为ttf的文件，注意，我们转换的就是这个文件，此处我们将解压的文件夹叫“原始文件夹”，打开Transfonter网站，按如下步骤操作：点击add fonts按钮添加我们之前提到的ttf文件 ——> 打开以及勾选下图中.
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7027
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
原生微信小程序引入离线iconfont字体图标
qq_15064263的博客
08-17 616
原生微信小程序引入离线iconfont字体图标
微信小程序 引入字体图标 字体 使用base64解决字体请求问题
时间在飞飞的博客
04-08 1174
在做公司的项目的时候，引入了奥森字体图标，控制台对这个url有报错提示，虽然字体显示正常，但还是想解决这个烦人的报错，试过加载目录中的fontawesome-webfont.ttf 静态资源但是加载不上，最后把ttf字体转换成base64格式解决了这个问题。这个是字体转base64格式的网址：https://transfonter.org/这一次再次编译就不会有报错提示了。...
微信小程序（十二）在线图标与字体的获取与引入
不起眼小菜菜的博客
01-23 807
注释很详细，直接上代码……
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序uniapp银行卡卡片样式组件
05-09
【manifest.json】是uniapp项目的配置文件，它定义了应用的基本信息，如名称、图标、权限设置、页面路由等，还包含了各端的配置，如微信小程序的特定设置，这些设置会影响编译后的小程序在微信环境下的表现。...
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
最新发布
weixin_44166849的博客
07-17 92
微信小程序 vant-weapp的 SwipeCell 滑动单元格 van-swipe-cell 滑动单元格不显示 和 样式问题 滑动后删除样式不显示
【微信小程序知识点】转发功能的实现
weixin_51781852的博客
07-12 407
2.通过给button组件设置属性open-type="share",可以在用户点击按钮后触发Page.onShareAppMessage事件监听函数。1.页面js文件必须声明onShareAppMessage事件监听函数，并自定义转发内容。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。转发功能，主要帮助用户更流畅地与好友分享内容与服务。
微信小程序与本地MySQL数据库通信
qq_46396470的博客
07-17 340
因此，查询语句我放在了微信小程序的后端生成，然后发起HTTP请求时，直接传到中转服务器，中转服务器直接传给MySQL服务器，最后中转服务器将数据库返回的结果直接返回到微信小程序后端即可。发起写入请求时，我们将必要的参数（表名、插入字段，字段数据）传递给中转服务器即可，服务器能够自动完成相关语句的拼接。因为本地MySQL服务器没有域名，也没有进行相应的请求操作封装，因此微信小程序没办法和数据库通信。对于数据库的查询，由于查询语句复杂多样，灵活多变如果放在服务端进行处理，我个人觉得不太方便。
定制开发AI智能名片商城微信小程序在私域流量池构建中的应用与策略
专注MarTech应用研究与实施方案
07-17 553
在数字经济蓬勃发展的今天，私域流量已成为企业竞争的新战场。定制开发AI智能名片商城微信小程序，作为私域流量池构建的创新工具，正以其独特的优势助力企业实现用户资源的深度挖掘与高效转化。本文深入探讨了定制开发AI智能名片商城微信小程序的概念、价值、实施策略、技术挑战及未来发展趋势，并结合实际案例，为企业提供了一套完整的私域流量池构建方案。
PHP废品回收微信小程序系统源码
2401_84413757的博客
07-15 292
在这个小小的微信小程序里，藏着大大的环保梦想。它让废品回收变得简单快捷，让环保理念深入人心。让我们携手，从点滴做起，用科技的力量，为地球母亲披上更绿的衣裳！🌿快来加入废品回收微信小程序的行列吧，让每一次点击，都成为推动绿色生活的力量！💪🌟。
微信小程序引入思源字体
05-25
微信小程序支持引入外部字体，包括思源字体。以下是引入思源字体的步骤： 1. 下载思源字体文件（.ttf 或 .otf 格式）并保存到小程序项目中的某个目录下。 2. 在 app.wxss 文件中定义字体，并设置字体文件的路径。例如： ``` @font-face { font-family: 'SourceHanSansCN'; src: url('/fonts/SourceHanSansCN-Regular.otf') format('opentype'); } ``` 3. 在需要使用该字体的页面或组件中，使用 font-family 属性来指定字体。例如： ``` .text { font-family: 'SourceHanSansCN'; } ``` 注意：在引入外部字体时，需要考虑字体文件的大小和下载速度对小程序性能的影响。建议只引入必要的字体文件，并尽可能压缩字体文件大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值