uniapp 中使用彩色图标，引入阿里图库iconfont

已于 2023-06-14 11:23:30 修改
阅读量1.5k 收藏 6
点赞数 2
分类专栏： Uni-app 其他 文章标签： uni-app icons
于 2021-06-18 10:44:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu104160112/article/details/118018089
版权
本文介绍了如何在uni-app中使用阿里图库的彩色图标，步骤包括选择symbol模式下载图标，通过iconfont-tools工具处理，将生成的iconfont-weapp-icon.css文件引入项目，并在App.vue及页面中进行配置和使用。
摘要由CSDN通过智能技术生成

1.选择symbol模式，下载到本地
在这里插入图片描述
2.下载后解压
在这里插入图片描述
3.在解压开的文件夹中 shift+右键 打开powershell 窗口
执行代码：npm install -g iconfont-tools
在这里插入图片描述
4.然后执行代码：iconfont-tools
然后一路回车（或者根据自己设置）
在这里插入图片描述
5.文件夹中就多出一个文件 iconfont-weapp
在这里插入图片描述
6.把 iconfont-weapp-icon.css 移入你的项目中
在这里插入图片描述
7.App.vue中添加以下代码

最低0.47元/天 解锁文章
倘若hfl
关注
专栏目录
uni-app中使用自定义图标库
qq_43579525的博客
06-30 8080
方法一： 1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的) 2.在项目根目录下创建common目录，并把iconfont.css文件放入common目录中 3.修改iconont.css里的@font-face（保留base64字体图标） 3-1：未修改前是这样 @font-face {font-family: "iconfont"; src: url...
uniapp项目使用iconfont彩色图标
weixin_43926731的博客
09-16 2211
uniapp项目使用iconfont彩色图标 在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。 搜索图标 打开icongont官网搜索自己想要的图标，以微信图标为例。 点击自己想要的彩色图标加入到购物车，再点击添加至项目 根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹 下载到本地 这个地方选择Font class，然后点击下载至本地 解压压缩
uniapp基于阿里图标库引入彩色的图标iconfont
qq_53509791的博客
07-17 1579
7.使用：其中xk857-icon开头是必须的，彩色图标当前对 vue文件有效，控制台会关于backgroud的相关警告，可忽略它。2.对下载的文件进行解压，命令行进入解压后的文件下，执行一下命令，全局安装iconfont-tools工具。3.当我们全局下载完工具以后，点开文件夹，在文件夹的导航栏cmd，再执行如下的代码，然后回车。5.最后一步就是将我们在文件夹下产生的新的文件夹下使用iconfont.css的文件。6.然后在APP.vue的文件下引入你的文件名称。，添加图标到项目，然后下载至本地。
uni-app里引入阿里彩色矢量图标(Symbol),却发现图标显示为黑白
最新发布
一只猫
08-25 790
当使用uniapp并尝试引入阿里iconfont的彩色图标时，发现图标显示为黑白。原因是Fontclass模式不支持彩色图标。解决方法是下载Symbol模式的SVG文件，使用iconfont-tools进行转换，然后在项目中全局引入转换后的CSS文件，最终在组件中正确显示彩色图标。
uniapp中使用阿里彩色图标
记笔记
12-30 1171
uniapp中默认只能使用纯色图标，使用纯色图标的方法uniapp官网有可自行查看，如果项目中有使用阿里彩色或多色图标的需求就可借助iconfont-tools工具实现
uni-app使用多彩色图标,阿里图库
Csdn_Murry的博客
11-28 2865
亲测可用: 1.按照如下教程:https://www.cnblogs.com/caijinghong/p/13432906.html 2.安装工具出错。参考。https://blog.csdn.net/weixin_43336281/article/details/107064733
uniapp显示彩色的阿里icon的图标
Aspennnnnnnn的博客
06-01 258
uniapp 阿里图标
uni-app图标库
Sun_Maple_jw的博客
09-07 9422
首先需要使用HBuilder X安装导入插件 官方文档路径：https://ext.dcloud.net.cn/plugin?id=28 <template> <view> <uni-icons type="cloud-upload"/> <uni-icons type="cloud-upload" color="#007aff" /> <uni-icons type="cloud-upload" color="#...
uniapp 中如何使用阿里彩色 iconfont（兼容微信小程序）
qq_28568547的博客
06-15 442
1、在自己图标库项目中下载到本地： 2、解压 3、shift+右键 打开powershell 窗口 执行一下代码 npm install -g iconfont-tools 4、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 按一下操作 5、目录会多了个iconfont-weapp文件 进入文件把 iconfont-weapp-icon.css复制到 static 文件中 6、在app.vue中导入 @import './
uniapp+editor图标文件+iconfont.ttf
03-10
uniapp editor富文本编辑器的图标文件
uniapp字体图标的使用
12-31
本文将深入探讨如何在uniapp中有效地使用字体图标。 一、字体图标概述 字体图标（Font Icons）是通过将图标转化为字体文件来实现的，它们以Unicode编码的方式存储，可以像文字一样调整大小、颜色和位置，而且不受...
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
uniapp使用阿里图标库
码农键盘上的梦
07-18 2083
在项目根目录的App.vue中，引入上述的，注意自己存放的路径，且通过@import引入的外部样式，需要写在style标签有效内容中的最前面使用和type属性自定义图标注意因为本质上还是使用的字体，所以多色图标还是不支持的。httpshttpshttpshttpshttpshttps。...
uniapp中使用彩色阿里巴巴矢量图标（超详细）
weixin_71893751的博客
07-24 520
将 iconfont-weapp-icon.css （默认生成的文件名字）放入uniapp项目的static文件夹下。打开上面解压的文件夹即可看到生成的目标文件 iconfont-weapp。Window+R打开控制面版，输入cmd—点击enter键。出现如图所示的内容，按图示输入文件名即可。将下载的文件进行解压，得到如图。切换到上面解压完成的文件夹下。----点击enter键执行。----点击enter键执行。iconfont图标的引入（进入阿里巴巴矢量图标库。设置宽高，控制图标的大小。
uniapp插件: wu-icon图标库：为您的项目带来炫酷的图标！
qq_43402051的博客
08-07 888
大家好！今天我要向大家介绍一款基于字体的图标组件——wu-icon，它不仅包含了大多数常见场景的图标，而且支持自定义（包括nvue）文字与图片图标，真的非常实用！
uniapp使用阿里图标（入坑）
Front小思的博客
06-08 2116
准备 下载阿里图标到本地（https://www.iconfont.cn/），uniapp不支持symbol格式 校验 https://transfonter.org/点击ADD fonts 添加下载的 iconfont.ttf 文件，配置如下图，点击convert保存，Download。 配置 把阿里图标的iconfont.css 复制到项目里，删除@font-face{ }里的代码，把下载下的stylesheet.css的文件复制到iconfont.css文件里。 使用 main.js全局引入 im
uniapp使用alibaba icon的symbol方式引用多色图标
Sinder小德的博客
03-31 988
将iconfont-weapp文件夹中的iconfont-weapp-icon.css放至static静态资源文件夹下，并（app.vue）全局引用该css文件。首先打开alibaba icon网站，选择自己想要的icon，加入购物车，然后打开购物车下载代码。一般在node文件夹的node_global下，与iconfont-tools文件同级。将iconfont.js文件放入iconfont-tools文件夹下。代码下载后解压可以看到如下目录。其中lanqiu为图标名称。然后就可以愉快的使用了。
uniapp小程序使用symbol格式图标（阿里图标库）
o3o_o3o的博客
08-30 1586
uniapp小程序使用阿里图标库symbol格式的图标
uniapp引入阿里图标库
active_pig的博客
10-04 1605
平时项目开发肯定少不了图标的使用，除了自己定制图标库之外，再一个比较不错的就是使用阿里的图标库，这里包含了很多分类的图标，基本上你想用的图标它都有，不仅好看，使用起来也是非常方便的，下面一起来看看吧。你进入这个官网以后，挑选自己喜欢的图标后添加到自己的项目中，没有项目的随意建一个新的，新图标首先先加入购物车，然后到时候一块添加到项目中。这个就是图标的代码，每个不同的图标都不一样，这个可以自己尝试一下。官网地址：https://www.iconfont.cn/
uniapp小程序如何在线引入阿里图标库
05-20
要在uniapp小程序中引入阿里图标库，您可以按照以下步骤操作： 1. 在您的uniapp小程序项目中找到 `App.vue` 文件，然后在该文件中加入以下代码： ```html <!-- 引入阿里图标库 --> <iconfont class="ali-icon" :style="{ fontFamily: 'iconfont' }"></iconfont> ``` 2. 在 `static` 目录下新建一个文件夹（例如 `iconfont`），将您下载好的阿里图标库文件（例如 `iconfont.ttf`）放到该文件夹中。 3. 打开阿里图标库官网，选择您需要的图标并添加到购物车中。在购物车页面下载图标代码包。 4. 解压缩下载的图标代码包，找到 `iconfont.css` 文件并复制其中的 CSS 代码。 5. 在您的 `App.vue` 文件中加入以下代码，将阿里图标库的 CSS 样式引入： ```html <style> @font-face { font-family: 'iconfont'; src: url('static/iconfont/iconfont.ttf') format('truetype'); } .ali-icon { font-size: 32px; color: #333; } /* 将从阿里图标库官网下载的 CSS 代码粘贴到这里 */ </style> ``` 6. 在粘贴的 CSS 代码中，将所有的 `font-family` 属性值改为 `iconfont`，以便与上面的 `@font-face` 代码相对应。 7. 至此，您已经成功将阿里图标库引入您的uniapp小程序项目中了。可以在需要使用图标的地方使用 `<iconfont class="ali-icon">&#x图标代码;</iconfont>` 的方式来使用阿里图标库中的图标。其中，`&#x图标代码;` 表示要使用的图标的代码，可以在阿里图标库官网上找到对应的代码。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值