微信小程序引用多色图标

已于 2023-11-15 11:03:14 修改
阅读量85 收藏 1
点赞数
文章标签： 微信小程序 小程序
于 2023-11-15 11:01:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanglihui10071030/article/details/134415274
版权

生成图标库css文件 

在iconfont中创建项目并加入图标

项目设置中

选中彩色

生成图标样式

  • 打开//at.alicdn.com/t/c/font_4330895_k90j7c4tj78.css链接可以复制样式文件中加入本地css文件中

代码使用

<icon class="iconfont_cwds icon-bianji"></icon>

Tip:这边我自己改了字体的名字

大功告成！！

huanglihui1007
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 319
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
如何优雅的在微信小程序使用 SVG 字体图标
pingan8787
07-28 1644
本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支持一下啦。 最近在重构一个项目，主要是做 H5 端和小程序端，这次打算开始多做总结啦，之前已经总结一篇《如何优雅的管理 HTTP 请求和响应拦截器？》 。 如果大家还有其他方案，欢迎一起探讨哈~ 喜欢本文的朋友给个赞????鼓励一下哈~ 一、需求思考和方案设计 本文介绍的项目是使用 Taro框架进行多端开发，目前主要适配 H5 端和微信小程序端。项目使用的字体图标库内部维护，目前托管在 iconfont 上。
微信小程序使用阿里巴巴iconfont矢量多色图标
熟悉JS拼写的FE
10-16 927
原生微信小程序使用阿里多色iconfont图标 前言：能解决iconfont图标的只有下载png，还有使用symbol解决，但是如果都使用png会大大增加代码体积和加载速度
微信小程序如何引入彩色iconfont图标？
a896532147的博客
12-13 811
3，打开iconfont文件将文件名称为”iconfont-weapp“复制到小程序艮目录下，并创建文件名称为”",将你创建的项目下载到本地解压并命名为”iconfont“,在文件”iconfont“下。点击”enter“等到运行结果，如果系统提示找不到npm命令，那就先安装node.js。4，引用：在小程序的app.wxss文件中引入。出现如下内容，点击enter默认即可。">（去掉icon-)1，在阿里云矢量图官网："style"的文件夹下，
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 458
注意：如果出现“permission denied”等error信息，记住加上 sudo指令。4️⃣ 最终生成 iconfont-weapp-icon.wxss文件，放在项目中。5️⃣-1️⃣ app.wxss中引入wxss文件以及设置全局样式。2️⃣ 下载iconfont文件同时cd 切换到该目录。iconfont-tools // 生成小程序专用文件。icon开头的名称，都变成t-icon。5️⃣ 其他补充以及使用。5️⃣-2️⃣ 使用。
如何在 iconfont 中使用彩色图标
最新发布
bug处理进行时
02-04 1155
如何在 iconfont 中使用彩色图标
开发小程序如何使用iconfont彩色图标
jie_rookie的博客
11-22 613
解决开发小程序需要使用iconfont彩色图标
【Web技术】1033- 如何优雅的在微信小程序使用 SVG 字体图标
pingan8787
07-29 762
本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支持一下啦。最近在重构一个项目，主要是做 H5 端和小程序端，这次打算开始多做总结啦，之前已经总结一篇《...
如何在小程序中使用Symbol类型的iconfont
前端彭于晏的博客
01-29 942
如何在小程序中使用Symbol类型的iconfont 引用库 mini-program-iconfont-cli 操作步骤 Step 1 安装插件 Step 2 生成配置文件 Step 3 开始生成小程序标准组件 Step 4 引入组件 P.S. 更新图标
微信小程序如何引入图标
qq_42241873的博客
09-26 3374
微信小程序如何引入iconfont库的图标 学习微信小程序过程中需要引用iconfont库的图标，这里做个总结【从引入到使用】； 网址：上iconfont官网后自行注册个账号； 搜索自己需要的图标，加入到购物车，并自行创建一个文件夹来方便管理图标； 在自己的文件夹中，选择 font class,将生成的代码用网页打开，然后复制网页的代码，将样式放入微信小程序的项目styles文件夹下的iconfont.wxss文件，然后将这个样式文件在全局中引入，这样就可以引用了； 截图如下： 以上就是全
小程序引入icon的三种方式
shuangmu9768的博客
11-19 1万+
小程序引入icon的三种方式（原生图标、WeUI图标组件、iconfont图标） 原生图标 小程序里原生图标是通过icon标签来引入的： <icon type="success" size="24" color="green" /> WeUI图标组件 WeUI 是一套同微信原生视觉体验一致的基础样式库，基于小程序自定义组件构建，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。要使用WeUI组件，我们需要到组件下载页面去下载icon组件。 下载完成后我们会
微信小程序中 iconfont 图标的使用（包括彩色图标）
weixin_42754922的博客
11-17 893
微信小程序中 iconfont 图标的使用（包括彩色图标）
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
张营的技术博客
12-17 1417
把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。
微信小程序icon图标引入
努力搬砖的小码
08-15 2338
微信小程序引入iconfont图标
微信小程序使用字体图标
热门推荐
生如夏花 炫至茶靡
07-03 8万+
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
小程序中使用彩色图标（阿里iconfont）
qq_42961150的博客
09-08 854
前言 字体图标我相信大家都很熟悉，阿里图标库官网：https://www.iconfont.cn/ 一般我们在开发的时候，都是使用iconfont来管理项目里面的图标。但是我们该如何在小程序中使用彩色的字体图标？ 效果图： 使用步骤 1. 首先就是下载自己需要的彩色图标 2. 解压下载的文件后，进入相应文件打开黑窗口（cmd/git都可以），全局安装iconfont-tools（npm i -g iconfont-tools）,然后运行iconfont-tools，生成iconfont-weapp文
小程序怎么用阿里图库(可改变颜色)
遇事不决，可问春风。
03-22 3236
由于刚接触小程序;UI没有到位,想用矢量图,废话少说,自己来撸字体图标。先登录自己的阿里图标账号库 点击打开链接然后添加自己要用的图标：可以自己建立整个项目中用的图标        选择下载把下载中需要的eot，ttf，woff，css后缀的文件放置到新建的font文件夹中，css后缀改成wxss小程序识别样式后缀，引入到你的页面中；   如下：类如下：引入类如下：书写HTML运用如下：...
小程序系列-使用iconfont
图解前端的博客
03-26 8634
前言 iconfont是指使用字体文件代替图片文件，来展示图标和特殊字体的一种方法，目前我们使用的iconfont都是存储在阿里的iconfont网站上的。 获取iconfont文件 想要使用iconfont首先需要有iconfont的文件，在文章中使用的iconfont文件是笔者在www.iconfont.cn上下载的，你可以通过下面的步骤来获取iconfont文件 1. 登录www...
小程序中如何使用在线字体图标iconfont
五颜六色的白
01-23 2223
最近学习微信小程序，需要使用很多小图标，所以就想到使用在线字体图标，那么接下来分享一下如何在小程序使用iconfont 一.生成iconfont 首先在官网https://www.iconfont.cn/将自己需要的图标加入购入车，然后点击右上角的购物车图标，弹出如下内容框 然后点击确定按钮，就出现如下界面，此时，已经生成字体图标啦，点击unicode选项，并且点此复制代码，点击旁边的下...
微信小程序自定义无图标的toast教程
"微信小程序开发中的自定义toast实例教程，由michael_ouyang撰写，讨论了微信小程序原生toast API的局限性以及如何通过自定义实现更灵活的toast提示功能。" 在微信小程序的开发过程中，为了向用户提供即时反馈，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值