如何UNI-APP中使用iconfont彩色图标
问题：UNI-APP可以支持用户自定义引入iconfont标签库，但是加载引入页面的标签均为黑白颜色，下载的彩色图标默认变为黑白颜色
解决方案：
1.首先，从iconfont官网（iconfont-阿里巴巴矢量图标库）选择自己需要的图标加入项目中，点击下载至本地。
2.在本地找到下载的压缩包，并解压，进入解压缩之后的文件，在地址栏中输入cmd打卡控制台（在文件夹内输入cmd可直接将路径定位到当前文件夹）
3.在控制台中输入指令：npm install -g iconfont-tools（此操作前置条件需要用户安装node.js），按回车执行指令，运行完毕后效果如下
4.在控制台中输入指令：iconfont-tools，按回车执行指令，之后会以此出现下图中1-5的内容，可根据自己的需求填写相关设置，如果不填写内容，则会按照默认的信息设置，如下图所示5.在完成上述操作后，可以发现在文件夹中多出了一个iconfont-weapp的文件夹（名字为上图编号1中用户设置的名字，此为默认名），进入此文件夹
6.进入后，会看到一个iconfont-weapp-icon.css的文件
7.将文件放入项目中（位置随意）
8.打开此文件，可以看到.t-icon开头的样式，这些样式就是可以引用的彩色样式（就是在原有的icon图标名称前加了“t-”后缀）
9.在App.vue文件夹中，引入此样式表（注意路径不要写错）
10.在页面中调用样式即可，注意，在class样式中要加入t-icon样式，还要加入具体要调用的样式（如t-icon-zonghechaxun）
<view class='t-icon t-icon-zonghechaxun"></view>
<text class="text list-color">分班方向</text>最终效果如下
注：关于步骤3-4的操作，网上部分前辈给出的操作方法是通过按住shift键+鼠标右键，在菜单栏中找到“在此处打开Povershell窗口“，但是本人在操作时系统总是提示失败，因此直接使用cmd进行操作
如何UNI-APP中使用iconfont彩色图标相关推荐
- 在VUE项目中使用iconfont彩色图标
1.进入main.js文件,引入iconfont.js /* 彩色iconfont */ import '@/xxx/iconfont.js' 2.进入对应的模块,添加对应的css类 .font-ic ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- 微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名 支持多色 兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
- iconfont彩色图标
进入阿里巴巴矢量图标库iconfont-阿里巴巴矢量图标库,添加图标到项目,然后下载至本地 解压后的本地文件如下,核心的是 iconfont.eot 文件 2.打开电脑命令行,执行以下命令,全局安装 ...
- 在Nuxt项目中使用iconfont阿里巴巴图标unicode
第一步:登录 登录: iconfont阿里巴巴图标 第二步:选择图标添加到购物车 第三步:把购物车图标添加到项目 第四步:找到我的项目 第五步:将图标文件下载到本地 第六步:在assets文件夹中创建 ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- uniapp 开发小程序使用iconfont彩色图标
1.在阿里图标官网添加需要的图标到你的项目中,然后下载文件到本地:https://www.iconfont.cn/ 2.解压下载后字体文件,如下: 3.在第二步解压的目录中,打开cmd: 输入命令行: ...
- 微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
- uniapp小程序使用iconfont彩色图标
1.进入阿里巴巴矢量图标库https://www.iconfont.cn/,添加图标到项目,然后下载至本地 解压后的本地文件如下 2.下载iconfont-tools npm install -g i ...
最新文章
- oracle导出客户机使用us7a,导入 Oracle WORLD SAMPLE
- 个人小应用服务器安装搭建,HP 360p Gen9 使用winpe安装centos[一]
- 1066 Root of AVL Tree (25 分)【难 / 知识点: 平衡树 未完成】
- 建站用什么cms_我想做独立站，我应该用什么建站工具？
- jQuery——高级(js对象、json、ajax)
- 30篇「CVPR2020」最新论文抢先看！看计算机视觉2020在研究什么？
- activiti5.13 框架 数据库设计说明书
- 计算机音乐刚好遇见你乐谱,刚好遇见你钢琴谱-李玉刚｜因为我刚好遇见你
- mysql 根据子查询的结果查询朱标_Python - MySQL数据库操作
- 如果一个普通人想创业或是干点副业赚钱，应该去赚谁的钱？
- java中转为整形的编码_java中Unicode编码转化为中文
- springboot templates读取不到_精通 Spring Boot 系列 04
- [转载] ANTLR——语法分析
- socket与模拟http请求
- 黑群晖二合一安装不了套件_黑群晖刷机教程
- 【STM32 基础实验蜂鸣器发声】
- 聊聊从古至今都是如何加密的~
- C语言程序设计题目汇总（不断更新中）
- 机器人动力学与控制学习笔记（七）————基于计算力矩法的滑模控制
- python许可证_一图看懂各种许可协议