小程序使用iconfont

最新推荐文章于 2024-02-05 17:28:09 发布
最新推荐文章于 2024-02-05 17:28:09 发布
阅读量1.9k 收藏 4
点赞数 1
分类专栏： 原生小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingAn123/article/details/106459866
版权
本文详细介绍了如何在小程序中使用iconfont，包括从创建图标库到引入样式文件，以及解决组件样式隔离和在伪类选择器中使用iconfont的问题。提供了具体的步骤和注意事项，帮助开发者顺利实现图标在小程序中的应用。
摘要由CSDN通过智能技术生成

文章目录

vue项目使用iconfont

使用iconfont图标样式库-CSDN

一、小程序使用iconfont

与普通前端项目一样，在iconfont图标库官网中添加到购物车，再从购物车添加到自己创建的项目中。

1. 找到创建的图标库

在这里插入图片描述

2. 查看生成的样式文件在线链接

在这里插入图片描述

3. 复制在线链接，直接用浏览器打开

在这里插入图片描述

在这里插入图片描述

4. 小程序中引入iconfont

创建iconfont.wxss文件(自己命名，可放置根目录下或创建个文件夹放置，看个人情况)

把👆浏览器打开的css样式内容全选复制到创建的空iconfont.wxss文件中

5. 小程序使用iconfont

在根样式文件app.wxss中引入iconfont.wxss
引入app.wxss中作为全局css

/*相对路径*/
@import "iconfont.wxss"

👆app.wxss，如果iconfont.wxss文件不再根目录，需要写相对路径引入

如：既引入color-ui又引入iconfont的项目app.wxss

/**app.wxss**/
@import "colorui/main.wxss"</
最低0.47元/天 解锁文章
「已注销」
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序中使用iconfont
weixin_43893844的博客
07-19 642
小程序使用iconfont，但没有生成font class怎么办
微信小程序中使用iconfont(阿里矢量图标字体)
热门推荐
huangpb的博客
07-11 1万+
在微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 方式一：Font class 方式 1. 在 http://iconfont.cn/ 选择你想要的图标，选择 Font class 类型并下载到本地。 2. 解压下载到本地的压缩包，将里面的 iconfont.css 文件复制到你的项目中，并将后缀名改为 ...
在小程序中使用iconfont
DargonWisdom的博客
08-10 3882
小程序使用iconfont的使用
小程序之使用Iconfont
moozixiao的博客
05-21 462
1.在 iconfont 官网 添加需要的字体图标 2.找到添加了字体图标的项目，选择 下载到本地 3.将压缩包解压，拿到 iconfont.css 4.在 iconfont 官网 找到项目的 Unicode，复制 @font-face 的代码 5.在 iconfont.css 中 将复制的代码替换到相应位置即可并修改 .css 为 .wxss 6.在 iconfont.wxss 中可以根据自己项目要求修改 图标 class 名称 ...
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 301
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序使用iconfont在线icon
m0_56860190的博客
05-10 1574
微信小程序在线使用iconfont 为了节省空间，也可以在线使用
微信小程序使用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 8876
微信小程序上使用iconfont的方法一、选取需要的icon二、在微信小程序中使用iconfont三、其他 一、选取需要的icon 1、在iconfont上选取自己所需要的图标，然后添加到库内 2、将挑选的图标添加到自定义的项目中 3、选择生成font class的代码 4、点击链接进入代码并复制全部 二、在微信小程序中使用iconfont 1、在项目下创建style文件夹，并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2、在app.wxss内引
微信小程序中使用iconfont
小杂馆
12-11 2372
最近在研究微信小程序，发现他自带的icon有点少，就去阿里矢量图标库里找了几套库扔进去，发现显示不出来。。。 研究了一下，说下步骤吧 1. 图标库下载你想要的图标 2. 登录网站https://transfonter.org/ 3. 按下图操作即可 4. 将下载的css引入就好了，其下来就是正常用法了
微信小程序之使用iconfont
最新发布
weixin_44943855的博客
02-05 1000
icon图标无法显示可能原因，小程序的wxss文件font-face的url不接受http地址作为参数,因此要先将字体文件下载后,转换为base64（7.下载下来的文件中的css文件内容，替换放入项目的iconfont.wxss的@font-face内容，可以就保留一个src, 不然文件会有点大。4.将上面的iconfont.css拷贝到自己的项目中，并将后缀改为.wxss(因为微信小程序支持的是wxss)3.icontfont-资源管理-我的项目， 选择刚才保存的项目，点击下载到本地。
微信小程序使用iconfont
WeiflR10的博客
07-20 491
从阿里巴巴矢量图官网升级维护后，生成cdn功能就不可用了，原来的方法使用iconfont就行不通了
微信小程序：小程序使用iconfont
Crazy_GirlLL的博客
12-16 174
首先去https://www.iconfont.cn/网站下载需要的iconfont 然后点击下载 下载到本地之后解压，获得如下文件， 进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式 点击下载，得到转换后的压缩包，名为transfonter.org-开头。解压可以得到如下图的几个文件： 然后将iconfont.css和stylesheet.css文件的后缀改为wxss,如下 然后再app.wxss文件中全局引入.
微信小程序里使用iconfont
ye15950551288的博客
08-18 775
一、单纯使用icon字体，不带原始样式 1、下载fontClass版图标 2、解压缩，将其中的.ttf字体格式文件进行转化 注：微信小程序里本身不支持通过url引入外部文件的方式，所以要将引用的文件转成引用Base64码 转化后： 然后将这段转化后的@font-face替换到原先的iconfont.css文件中的@font-face 转化方法： 推荐转化网站：https://transfonter.org/ 将iconfont....
小程序iconfont使用
weixin_37974230的博客
07-28 919
做小程序时候需要用到iconfont图标，找了网上别的方法，最终也没有使用base64转化； 首先从iconfont库下载 下载下来的文件是：     然后把iconfont.css改为小程序可以识别的.wxss文件,放在小程序项目里面   引用的时候只需要在用到的地方引用， 也可以再app.wxss全局引用； 使用效果和平时项目中一样    ...
微信小程序中使用iconfont图标
coding...
10-29 7597
方案一： 利用小程序中不支持 ttf 字体，却支持 base64 的特点，我们可以通过将 ttf 字体转码成 base64 ，再通过 iconfont 的特点，通过设置字体大小和颜色来达到目的。 具体做法： 1.我们可以先去阿里提供的图标库 官网找到我们需要的3个图标， 点击 下载代码 将代码下载到本地~ 2.解压我们刚才下载的包，会有以下这些文件，但对于我们来说，会用到的只有 iconfont....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值