微信小程序中使用iconfont图标

最新推荐文章于 2024-03-11 09:29:08 发布
最新推荐文章于 2024-03-11 09:29:08 发布
阅读量579 收藏 2
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Enola_li/article/details/117512234
版权
本文介绍了如何在微信小程序中使用iconfont图标，包括在iconfont网站上选择图标，下载字体文件，通过Transfonter转换为base64格式，将CSS内容添加到app.wxss，以及定义和应用图标。
摘要由CSDN通过智能技术生成

iconfont图标在小程序中使用
1.首先注册并登录http://www.iconfont.cn，然后搜索自己要用的图标
选中喜欢的图标将其加入购物车
2.将需要的图标添加到购物车可以有如下三个选项，为了方便尽量选择添加到创建的项目
在这里插入图片描述
3.下载字体文件至本地
在这里插入图片描述
4.打开下载后的文件，选择后缀为ttf的文件，在https://transfonter.org/将字体文件转换为 base64 格式
在这里插入图片描述
在这里插入图片描述
5.打开下载的文件，选择后缀为CSS的文件复制其内容，添加到 app.wxss文件中

最低0.47元/天 解锁文章
Enola_li
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序使用iconfont图标
q1004124842的博客
04-28 658
图标的下载和平时一致,主要区别是在使用的时候 1. 引用的路径需要根据文件地址引入 2. 需要对woff文件做转换,转换网站https://transfonter.org/, 开启base64转换 @font-face { font-family: "iconfont"; /* Project id 1183980 */ /* 引用的路径也需要做修改 */ src: url('/style/iconfont.woff2?t=1651111039226') format('
在微信小程序中使用iconfont
m0_46526358的博客
02-12 8834
微信小程序上使用iconfont的方法一、选取需要的icon二、在微信小程序中使用iconfont三、其他 一、选取需要的icon 1、在iconfont上选取自己所需要的图标，然后添加到库内 2、将挑选的图标添加到自定义的项目中 3、选择生成font class的代码 4、点击链接进入代码并复制全部 二、在微信小程序中使用iconfont 1、在项目下创建style文件夹，并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2、在app.wxss内引
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 4170
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
微信小程序使用 iconfont
最新发布
前端挖掘机
03-11 650
base64。
微信小程序之使用iconfont
weixin_44943855的博客
02-05 971
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序引用iconfont图标的方法
10-17
微信小程序引用iconfont图标的方法知识点： 1. 微信小程序中引用iconfont图标的基本概念：iconfont图标，又称字体图标，是一种通过字体文件显示的矢量图标。它可以像字体一样被调整大小、颜色等属性，并且由于是...
微信小程序使用字体图标的方法
10-16
在微信小程序中使用字体图标的第一步是下载需要的字体图标。以阿里图标为例，开发者可以访问阿里图标官网搜索想要的图标，并下载相应的图标库。下载的图标库通常是一个ZIP压缩包，解压后包含多个文件，其中的TTF字体...
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序中使用自定义图标（阿里icon）的方法
10-18
在微信小程序中使用自定义图标，特别是使用像阿里云图标这类字体图标，是一种常见且实用的方法来丰富用户界面。以下是如何在微信小程序中实现这一功能的详细知识点： 1. 字体图标与传统图片图标的区别 字体图标是...
在微信小程序中如何引入iconfont
sayyy的专栏
10-07 2497
略
微信小程序如何引入Iconfont
weixin_39553363的博客
08-05 3776
通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。
在小程序中使用iconfont
DargonWisdom的博客
08-10 3877
小程序使用iconfont的使用
微信小程序中使用 iconfont 图标的四种方法
qq_43477721的博客
07-20 6335
1. 先去 iconfont 官网选择自己需要的图标，添加到项目中 点击红框 在浏览器中输入地址，得到的文件另存为 iconfont.wxss，放入项目的根目录下 打开 app.wxss @import "iconfont.wxss" 现在分两种情况，第一种是在 pages 下的 .wxml 中使用，第二种是在 components 下的 .wxml 中使用。 第一种 <text class="iconfont icon-fabu"></text> 后面的名称可以在 i
微信小程序线上加载使用iconfont问题
qq_35181466的博客
09-14 764
微信小程序线上加载使用iconfont问题
微信小程序引入iconfont图标
新疆程序猿的角落
01-06 588
微信小程序引入iconfont图标
微信小程序中使用iconfont(阿里矢量图标字体)
热门推荐
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font-size` 属性： ```css .iconfont { font-size: 24rpx; } ``` 这里将 `font-size` 设置为 `24rpx`，你可以根据你的需求来调整大小。 2. 在需要使用 iconfont 的地方，使用 `text` 组件来渲染 iconfont，并设置 `class` 属性为你在步骤 1 中设置的类名： ```html <text class="iconfont"></text> ``` 这里使用了 `` 这个 unicode 字符来表示 iconfont 中的一个图标。你需要将它替换成你想要使用的图标对应的 unicode 字符。 通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值