微信小程序使用阿里图标（彩色）

最新推荐文章于 2024-08-07 11:50:30 发布
最新推荐文章于 2024-08-07 11:50:30 发布
阅读量474 收藏
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 小程序 彩色阿里图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Moxi099/article/details/120974288
版权
本文详细介绍了如何在小程序中集成阿里图标库。首先创建项目并添加图标至购物车，然后将购物车内容导入项目。接着，下载fontclass代码并新建wxss文件进行存放。在相关wxss文件中引入新创建的阿里wxss文件，最后在home.wxml页面使用图标。通过此教程，开发者可以顺利在小程序中实现图标的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.创建一个项目（勾选彩色）

 2.搜索图标，并将图标加入购物车

3.将购物车的内容添加至刚刚创建的项目

 

4.点击font class

 5.点击该链接跳转，将代码全部拷贝，并在小程序中新建一个文件aliIcon.wxss,将代码复制到创建的wxss文件中

 6.在相关的wxss引用刚刚创建的阿里wxss文件。

7.在home.wxml页面使用图标

 🆗！！！效果图如下

微信小程序使用阿里巴巴iconfont
nimingyibo的博客
05-10 456
1.官网地址: .iconfont-阿里巴巴矢量图标库 2.打开我的项目新建项目 3.填写一个名字即可 4.搜索出你需要使用的图标 5.添加入库 添加入库后 右上角有一个购物车会显示 6.添加至刚刚创建的项目 7. 回到本地项目点击下载到本地然后解压下载的压缩包 8.把解压后文件里面的css复制进项目里 css文件改成wxss其他的不用管 9.在你需要使用图标的页面的wxss中导入字体图标样式 10.在哪里引用就输入字体图标的ico...
微信小程序(前端)使用阿里图标
简单发点工作中用到的，或者记录下小知识点
07-05 1849
阿里图库官网：http://iconfont.cn1、找到你想要的图标=>点击添加入库=>点击购物车图标 (就是已入库图标) 2、点击下载代码、并解压 3、打开在线转换ttf文件的网站，将解压出来的ttf字体文件转化成base64格式 在线转换网站：https://transfonter.org/ 具体操作如下几图： 1、在文件中添加样式内容。打开转换后解压出来的文件，找到，将其中的内容全部复制到 文件中。 2、打开没有转换过的download.zip解压出来的文件，找到文件，除了这部分不要，将其它
微信小程序中使用阿里ICON图标
dingwang9210的博客
01-25 697
由于微信小程序不支持ttf字体，只支持base64的问题，需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过https://transfonter.org/进行base64 处理 将经过base64处理后的文件下载并解压后取得stylesheet.css文件并在小程序的目录下新建iconfont.wxss文件讲s...
微信小程序使用阿里图标库（iconfont）封装自定义的icon图标组件
美奇软件开发工作室
11-06 2007
一、通过阿里图标库生成iconfont.wxss 1、登录阿里图标库官网https://www.iconfont.cn/，新建一个项目，例如我新建的项目是my-icon 2、把需要的图标加入购物车，然后再添加到项目里 3、打开项目，选择“Font class”类型，点击下载至本地 二、创建icon组件 1、新建my-icon文件夹，用来保存组件。在my-icon文件夹下分别创建...
微信小程序：使用阿里icon图标
WGYHAPPY的博客
08-12 348
网站地址 iconfont 添加至购物车 复制 Unicode 代码 下载代码 拷贝css代码 引用 <view class="content"> <text class="iconfont icon-flg padding-right-xs"></text> <text>{{item.name}}</text> </view> ...
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 524
注意：如果出现“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️⃣ 使用。
微信小程序使用彩色图标（阿里巴巴矢量图标库）（炒鸡详细）
mycocoo的博客
08-08 2995
前言废话 本来一直都是用的阿里巴巴矢量图标库中的单色图标，那样就简单，把素材代码文件下载一下，再复制到项目文件里就行了。可是前几天突然有个需求是用彩蛇图标当用户的头像，我以为按照原来的操作可行，结果原来可可爱爱的图标变成了一个黑色圆点。这可愁死我了，于是马上问度娘，原来是要下载插件，最后顺利的完成了需求。现在有空了就来整理一下操作顺序，希望能帮到像我几天前那样的小伙伴。 配置环境变量 如果已经安装过nodejs的小伙伴自动跳过 第一步，下载安装nodejs 1、下载 我的电脑是windows10 64位的
微信小程序引入阿里巴巴彩色图标字体（Symbol）
最新发布
03-29
好的，我需要帮助用户在微信小程序中引入并使用阿里巴巴彩色图标字体（Symbol）。根据用户提供的引用内容，我需要整理出一个清晰的步骤指南。 首先，用户提到了引用[2]中的步骤，即在项目根目录运行npm安装命令行...
阿里图标库symbol使用手册【小程序】
u013236718的博客
08-07 750
1、小程序开启使用npm模块；2、小程序项目根目录不要有iconfont目录，否则会清空里面所有内容；3、有nodejs环境；在小程序项目根目录，使用npm安装mini-program-iconfont-cli插件；
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 463
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
微信小程序中使用自定义图标（阿里icon）的方法
10-18
主要介绍了微信小程序中使用自定义图标（阿里icon）的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序使用阿里图标-iconfont
weixin_30878361的博客
12-27 102
步骤一：下载项目图标 步骤二：解压文件，重命名 iconfont.css为 iconfont.wxss ，并复制 到项目 static文件夹 icon文件夹下 iconfont.wxss文件内容如下 步骤三：在项目中 全局app.wxss 或者需要 单独文件项目 index.wxss 引用 @import '/sta...
微信小程序中使用阿里字体图标iconfont
weixin_44679078的博客
05-26 806
1，搜索需要用的字体图标 阿里巴巴矢量图标库：https://www.iconfont.cn/ 2，将选择好的图标加入购物车，点击右上角的购物车然后选择添加至项目 添加到项目的话，在下次继续追加或者修改一些图标来使用就更加方便 3，生成图标的链接 在上面第2步点击确定之后就会跳转到个人中心，选择Font class后点击查看在线链接 然后复制这个链接到项目 4，用浏览器打开图标的链接 复制上面的链接到浏览器打开（推荐用谷歌浏览器打开） 复制浏览器打开的页面里面的全部内容 5，粘贴到新建的wxss文件
微信小程序使用阿里巴巴图标库(外链式)
qq_30548105的博客
07-12 2043
由于小程序的前端代码大小最大只有2M，无疑逼着我们按照小程序的规范，把尽可能的图片都放在远程服务器上，即使用网络图片而非本地图片（本地图片的大小会算在打包程序大小内）。一般的数据图片还好，不用说我们都会放在服务器上，但是对于一些图标就比较头疼了，尤其是一些没有ui而是自己寻找图片当图标的程序员们，图标不合规范就算了，大小还很大，这里有个不错的图标库而且还免费，那就是阿里巴巴图标库了。地址在这里：https://www.iconfont.cn/home/index 接下来废话不多说，看看怎么用 一 登录.
微信小程序中使用阿里图标iconfont
qq_25801335的博客
06-29 497
【代码】微信小程序中使用阿里图标iconfont。
微信小程序引用阿里图标库
ansinie的博客
05-25 724
微信小程序要使用阿里图标库的图标，但是不想本地引入，想使用外链直接用 但是用外链确是 这些东西，显示不出来 原来点击这个链接把这些内容粘贴进去就可以用了 然后回到微信小程序 规范一点，创建一个文件夹，创建一个iconfont.wxss 然后在app.wxss里面引用 最后，在要使用的位置就ok了 ...
【微信小程序使用单色及彩色阿里巴巴矢量图标库】
regretTAT的博客
05-24 720
微信小程序使用iconfont图标 单色以及彩色
微信小程序引入阿里巴巴iconfont图标并使用
Shivy_的博客
10-16 1879
微信小程序引入阿里巴巴iconfont图标并使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值