微信小程序里使用iconfont

最新推荐文章于 2024-03-11 09:29:08 发布
最新推荐文章于 2024-03-11 09:29:08 发布
阅读量948 收藏 5
点赞数 1
分类专栏： 小程序 文章标签： 微信小程序 小程序 前端
原文链接：https://blog.csdn.net/ye15950551288/article/details/119779304?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165901770916780357268482%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165901770916780357268482&biz_id=0&utm_
版权

一、单纯使用icon字体，不带原始样式
1、下载fontClass版图标
image.png

2、解压缩，将其中的.ttf字体格式文件进行转化

注：微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用Base64码


image.png
转化后：

image.png
然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face
转化方法：
推荐转化网站：https://transfonter.org/

image.png

将iconfont.ttf字体文件上传，


image.png

上传成功后，将相应的配置打开：


image.png

然后转化下载Convert：


image.png
image.png

3、将iconfont.css扩展名改成wxss文件放到项目的assets文件下，其它的文件就不需要了，

image.png

4、在app.wxss中引用iconfont


image.png

5、使用


image.png

呐呐呐呐。
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在微信小程序中使用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）封装自定义的icon图标组件
最新发布
2401_84149505的博客
04-20 596
面试是一个不断学习、不断自我提升的过程，有机会还是出去面面，至少能想到查漏补缺效果，而且有些知识点，可能你自以为知道，但让你说，并不一定能说得很好。有些东西有压力才有动力，而学到的知识点，都是钱（因为技术人员大部分情况是根据你的能力来定级、来发薪水的），技多不压身。附上我的面试各大专题整理： 面试指南，满满的都是干货，希望对大家有帮助！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！整理： 面试指南，满满的都是干货，希望对大家有帮助！
微信小程序使用iconfont图标
weixin_48166795的博客
11-20 4957
在微信小程序中使用iconfont图标的方法
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 3626
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3678
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
在小程序中使用iconfont
DargonWisdom的博客
08-10 3863
小程序使用iconfont的使用
微信小程序中使用 iconfont 图标的四种方法
qq_43477721的博客
07-20 6099
1. 先去 iconfont 官网选择自己需要的图标，添加到项目中 点击红框 在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下 打开 app.wxss @import "iconfont.wxss" 现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。 第一种 <text class="iconfont icon-fabu"></text> 后面的名称可以在 i
微信小程序引入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图标文字
梁雨季™的博客
12-30 366
在微信小程序内如何使用iconfont图标文字： 1.下载具体的图标的代码 2.小程序内使用css代码 3.wxml引用节点 下载具体的图标的代码 1.在iconfont网站搜索需要的图标，加入到购物车 购物车 2.下载具体代码 打开购物车，直接点击 ‘下载代码’即可，打开下载的代码，使用里面的iconfont.css，复制其css代码到微信小程序内。 小程序内使用图标 1.复制的css可以直接放到具体的页面的xxx.wxss文件中 注意⚠️：这样只能单个页面使用，不建议这么做 2.放到公用图标文件，新
微信小程序引用iconfont图标的方法
01-03
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是： @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype...
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序 如何引入外部字体库iconfont的图标
08-28
本文将详细介绍如何在微信小程序中引入并使用Iconfont图标。 首先，你需要访问阿里巴巴矢量字体库（https://www.iconfont.cn/），这是一个集成了大量矢量图标的在线平台。你可以在这里搜索、选择或自定义你需要的...
微信小程序icon组件使用详解
08-28
本文将深入探讨微信小程序中的`icon`组件的使用方法，帮助开发者更好地理解和应用这一组件。 1. 原生`icon`组件： 微信小程序提供了原生的`icon`组件，用于展示系统提供的预定义图标。在WXML模板中，你可以通过以下...
微信小程序之使用iconfont
weixin_44943855的博客
02-05 836
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序 -- 引入 iconfont 矢量图标（Font class ）
m0_72951245的博客
12-01 666
微信小程序引入 iconfont 矢量图标（Font class ）;
微信小程序使用 iconfont
前端挖掘机
03-11 580
base64。
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2369
略
微信小程序使用iconfont坑
qq_33715850的博客
11-09 405
微信小程序使用iconfont坑
微信小程序引入iconfont图标
新疆程序猿的角落
01-06 569
微信小程序引入iconfont图标
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font...通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值