微信小程序——使用阿里巴巴UI字体库

最新推荐文章于 2024-04-06 11:32:24 发布
最新推荐文章于 2024-04-06 11:32:24 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44710964/article/details/104595474
版权
本文介绍了如何在微信小程序中使用阿里巴巴UI字体库，通过创建项目、下载字体文件并引入到小程序，实现UI图标灵活调整颜色和大小。步骤包括选择图标、下载字体库、解压并引入到小程序目录，以及在代码中使用Unicode和CSS进行显示和样式设置。
摘要由CSDN通过智能技术生成

对于只有一个ui的当然可以直接从阿里巴巴ui库上把UI直接下载下来使用

可是对于比较多的ui使用，我还是推荐用UI的字体引用来使用，这样方便灵活，可以更加便捷地修改icon的颜色和大小

首先进入阿里巴巴ui库，找到想要的ui，加入购物车
在这里插入图片描述
收集完自己想要的UI后点击右上角的购物车按钮
在这里插入图片描述

弹出这个，然后可以新建一个项目名，把收集到的UI放入这个项目中
在这里插入图片描述
然后跳转到了我的项目的网页，点击下载字体库到本地：
在这里插入图片描述

下载完是一个压缩包，解压打开，我们只需要iconfont.css文件
在这里插入图片描述

把它放入小程序目录里面，在这里我新建了个文件夹myFont，把

最低0.47元/天 解锁文章
饼小将
关注
专栏目录
php++仿网页版微信,vue+web端仿微信网页版聊天室功能
weixin_33072399的博客
04-11 1390
一、项目介绍基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat，实现了发送消息、表情(动图)，图片、视频预览，右键菜单、截屏、截图可直接粘贴至文本框进行发送。二、技术框架•MVVM框架：Vue2.5.6•状态管理：Vuex•页面路由：Vue-...
阿里支付宝使用的前端UI库Ant Design蚂蚁.zip
01-06
阿里支付宝使用的前端UI库Ant Design蚂蚁.zip
微信小程序使用阿里巴巴字体图标
weixin_42606458的博客
08-28 745
第一步：去iconfont下载所需要的字体图标  进入阿里图标官网http://iconfont.cn/，添加自己所需要的图标，然后点击下载代码，解压出来如下：  第二步：转换.ttf文件  进入https://transfonter.org/平台，将解压出来的.ttf字体文件转化成base64格式。流程如下：  点击下载，解压可以得到如下图的几个文件： 第三步：微...
原生微信小程序中使用-阿里字体图标-详解
Yt0601的博客
12-19 1620
在原生微信小程序项目中使用 阿里字体图标-步骤详解
小程序引用第三方字体（阿里巴巴普惠体）
weixin_47124112的博客
10-25 4046
有两个必填的参数，见上图，其中第一个必填参数用于给字体起名字，第二个必填参数为字体的url地址，这里建议使用。该方式比较简洁，但加载速度略慢，上代码。第二种方式（直接放入wxss）阿里巴巴普惠体2.0。
整理在小程序页面样式中引入阿里巴巴字体图标
徊忆羽菲
07-21 457
整理在小程序页面样式中引入阿里巴巴字体库1、登录阿里巴巴字体图标2、在小程序项目中配置 1、登录阿里巴巴字体图标 点我阿里巴巴字体图标库 搜索需要的字体图标 将需要的字体图标点击添加到购车中 添加到项目中，没有就新建项目 跳转到项目页，可以看到已经添加好的图标 点击查看在线链接 可以看到一个css样式的路径 2、在小程序项目中配置 在项目根目录创建存放公共样式的styles目录，新建iconfont.wxss样式文件，将阿里巴巴的css样式复制内容粘贴到文件中 修改公共样式文件app.wxss,导入ic
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6425
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
Android开源经典项目
Tamic （大白）
09-13 5722
Android开源项目大全，包括经典个人博客，组织和开源项目
{Android}面对最近的话题，你该如何选择
Android061505的博客
06-22 335
本文列举了Android常见高级面试题和答案解析。希望能够帮助到即将准备面试的Android开发朋友！ 1.如何对 Android 应用进行性能分析 android 性能主要之响应速度 和UI刷新速度。 可以参考博客：Android系统性能调优工具介绍 首先从函数的耗时来说，有一个工具TraceView 这是androidsdk自带的工作，用于测量函数耗时的。 UI布局的分析，可以有2块，一块就是Hierarchy Viewer 可以看到View的布局层次，以及每个View刷新加载的时间。 这样可以很快定位
阿里巴巴普惠体.zip
06-02
ttf版的阿里巴巴普惠体。
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
01-03
1.下载阿里图标，解压出来之后有个.css文件 　　 　　然后复制这css里面的所有代码 2.新建一个wxss文件，例如我新建的就是iconfont.wxss，然后把刚才复制的所有代码，复制到这个文件里面去。 3.在需要使用到图标的页面导入该wxss文件。例如： 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
Ant Design Library一套精美得像视觉稿的 Axure 组件库 阿里腾讯都在用
01-16
仅支持 Axure 8.0 以上版本 > 让交互稿美美"搭" 一套精美得像视觉稿的 Axure 组件库 来自蚂蚁 Ant Design
9个大厂的UI组件库，以后前端攒页面不愁啦！
2401_82616673的博客
02-19 4757
组件库是可以重复使用的界面设计元素的集合体，有时候需要快速搭建产品，从UI设计开始来不及，前端就得先跑起来，贝格前端工场为大家精选了9个大厂的UI组件库，都是免费的。
小程序使用别样字体
weixin_43840320的博客
01-27 1808
小程序使用font-family字体不够好看，用自己下载的字体或ui规定字体 在js的onLoad中使用loadFontFace onLoad(){ //YSHaoShenTi.ttf为ui指定字体文件 wx.loadFontFace({ family: 'webfont', source: 'url("../../utils/YSHaoShenTi.ttf")', success: function (res) { console.lo
微信小程序 引用字体
WGYHAPPY的博客
12-13 1949
方法一 官方 方法二 1.下载 安装footmin。 2.字体下载 ifont。 3.转换所需词汇： 4.代码引用： 复制文件中的代码： 为(只保留最长的就可以)： @font-face { font-family: "RuiZiChaoPaiHaoHengHeiJian-TeHei-2"; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMq8zEIAAAACsAAAAYG
微信小程序自定义字体
sq66666666的博客
07-14 925
1、首先找到自己的ttf包 2、进入Online @font-face generator — Transfonter点击Addfonts把你的ttf文件上传 上传成功之后把这两个选项钩上 然后点击Convert 等待一小会时间，下面会出现两个选项，点击下载 下载解压之后得到了这样一个文件夹 双击打开css文件 全选复制 粘贴到小程序中的app.wxss文件中，标红的地方可以自定义，但是使用的时候一定要一致，否则不生效 使用 效果 ...
浅谈前端八大UI库，web开发基础
最新发布
2301_76232361的博客
04-06 2476
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
微信小程序引用iconfont字体资源
huaqishen123的博客
01-20 388
闲话少说 第一步：访问iconfont网页iconfont-阿里巴巴矢量图标库，找到想要的图标，加入购物车 添加至项目： 下载至本地： 第二步：下载并解压文件后，将其中.ttf文件上传至此网站中转Base64：（注意此处的iconfont.css，一会还要使用。）Online @font-face generator — Transfonter 第三步：下载后解压的文件中，注意其中的stylesheet.css文件，将此文件中的代码粘贴复制到【第二步中的iconfo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值