微信小程序：小程序使用iconfont

最新推荐文章于 2024-03-03 04:00:00 发布
最新推荐文章于 2024-03-03 04:00:00 发布
阅读量153 收藏
点赞数
分类专栏： 日常踩坑 小程序 地图 文章标签： 小程序
原文链接：https://blog.csdn.net/u014202165/article/details/81115089
版权
小程序 同时被 3 个专栏收录
35 篇文章 0 订阅
订阅专栏
日常踩坑
29 篇文章 0 订阅
订阅专栏
地图
27 篇文章 1 订阅
订阅专栏

首先去https://www.iconfont.cn/ 网站下载需要的iconfont

然后点击下载

下载到本地之后解压，获得如下文件，

进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式

点击下载，得到转换后的压缩包，名为transfonter.org-开头。解压可以得到如下图的几个文件：

然后将iconfont.css和stylesheet.css文件的后缀改为wxss,如下

然后再app.wxss文件中全局引入

然后就可以使用了

Crazy_GirlLL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序使用iconfont
kingAn123的博客
05-31 1912
文章目录vue项目使用iconfont一、小程序使用iconfont1. 找到创建的图标库2. 查看生成的样式文件在线链接3. 复制在线链接，直接用浏览器打开4. 小程序中引入iconfont5. 小程序使用iconfont6. 页面使用iconfont二、组件样式隔离导致iconfont无效三、在伪类选择器中使用iconfont1、iconfont作为伪类图标2、iconfont作图片缺省图 vue项目使用iconfont 使用iconfont图标样式库-CSDN 一、小程序使用iconfont 与
小程序中使用iconfont
baidu_41601048的博客
05-01 331
1.下载字体到本地 2 在app.wxss中导入，比如我的路径是@import"./assets/fonts/index.wxss"; 3 点击复制此代码。在浏览器中打开得到代码 4 5注意：如果新添加了图标。在会出现更新此代码。要先点击更新此代码。然后再次点击复制此代码 6 把浏览器中得到的代码复制到@import"./assets/fonts/index.wxss";该路径下的index.wxss中即可 ...
伪类选择器添加阿里图标 iconfont.css 的方法
liujiawang1219的博客
08-11 1266
阿里图标库下载源码得到 iconfont.css @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1591689630095'); /* IE9 */ src: url('iconfont.eot?t=1591689630095#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf
CSS使用伪元素引入IconFont
W261206的博客
06-12 1778
在日常的开发中，我们一般都是使用类名的方式来引入iconfont，其实我们也可以使用伪元素来引入字体图标，并且更有助于我们html结构的清晰。
微信小程序里使用iconfont
ye15950551288的博客
08-18 745
一、单纯使用icon字体，不带原始样式 1、下载fontClass版图标 2、解压缩，将其中的.ttf字体格式文件进行转化 注：微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用Base64码 转化后： 然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face 转化方法： 推荐转化网站：https://transfonter.org/ 将iconfont....
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
基于微信小程序实现爱卡汽车小程序源码分享
06-13
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
基于微信小程序实现美食菜谱小程序源码分享
06-21
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
基于微信小程序实现课程预约小程序源码分享
06-15
2. 开发文档：微信小程序宝典秘籍 通过这个查找微信小程序的API，组件，框架等等。 3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于...
iconfont无法在小程序的自定义组件中使用
weixin_46977007的博客
10-10 742
今天想在小程序的自定义组件iconfont图标库时，发现图标不能正常使用 原因： iconfont是css伪类的图标库，必须引入才能使用。 解决方法 iconfont是css伪类的图标库，必须引入才能使用。只在app.wxss中引入是无效的，所以必须在对应的自定义组件中的wxss中引入 ...
iconfont图标应用到content伪类中
w19981225的博客
01-13 734
css---伪类使用字体图标（iconfont/FontAwesome）等
weixin_44875693的博客
04-12 1314
1.找到要使用图标的Unicode字符 2.代码中添加 .el-form-item__error:before { content: '\f06a'; font-family: FontAwesome; //FontAwesome图标 } &::after { content: '\e60b'; font-family: "iconfont"; //iconfont 图标
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
最新发布
时光の尘的博客
03-03 3548
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
在微信小程序中使用iconfont
m0_46526358的博客
02-12 8794
微信小程序上使用iconfont的方法一、选取需要的icon二、在微信小程序中使用iconfont三、其他 一、选取需要的icon 1、在iconfont上选取自己所需要的图标，然后添加到库内 2、将挑选的图标添加到自定义的项目中 3、选择生成font class的代码 4、点击链接进入代码并复制全部 二、在微信小程序中使用iconfont 1、在项目下创建style文件夹，并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2、在app.wxss内引
微信小程序之使用iconfont
weixin_44943855的博客
02-05 821
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2350
略
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3671
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
微信小程序中使用iconfont图标
coding...
10-29 7571
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
微信小程序使用iconfont
05-21
2. 在微信小程序开发工具中创建一个iconfont目录，将下载的图标文件拷贝到该目录下。 3. 在需要使用图标的页面的json文件中引入iconfont.wxss文件。示例代码如下： ``` { "usingComponents": {}, ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值