iconfont 使用彩色图标

1、下载iconfont到本地

2、全局安装 iconfont-tools 

npm install -g iconfont-tools

3、在iconfont解压目录下执行命令、一直回车

iconfont-tools

4、文件拷贝

        执行完上述命令后会生成iconfont-weapp目录,将iconfont-weapp目录下的iconfont-weapp- icon.css文件拷贝至iconfont目录下

5、项目mian.js中文件引入文件

import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont-weapp-icon.css'

6、项目中使用

<!-- 彩色图标 -->
<i class="t-icon t-icon-tdt ticon"></i>
<!-- 矢量图标 -->
<i class="iconfont icon-location icon"></i>

7、效果预览 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/181507.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android BSP开发之二

1.添加system property 在/device/<vendor>/<project>/system.prop 文件中添加需要的属性。 如在XXX中添加”persist.sys.touch_mode”属性&#xff0c;在system.prop文件中新增一行如下内容&#xff1a; # Property for touch panel mode persist.sys.tou…

【23真题】比985还难的双非!

今天分享的是23年长春工业大学807的信号与系统试题及解析。 本套试卷难度分析&#xff1a;本套试题难度中等偏上&#xff0c;题量不少&#xff0c;难度不小&#xff01;状态方程考察的淋漓尽致。另外还有电路题。这所双非院校的真题比90%的211难&#xff0c;甚至比一部分985更…

Linux 离线安装NFS共享文件

一、检查端口是否被占用 程序默认使用2049端口&#xff0c;如果被占用需要修改端口 二、在线安装&#xff0c;服务器&#xff08;共享端&#xff09;和客户端&#xff08;使用端&#xff09;执行以下命令安装 yum install nfs-utils rpcbind -y 三、离线安装过程 链接&#…

多线程概念及其方法讲解

1 认识多线程 1.1 线程的概念 线程是CPU分配资源的基本单位。当一程序开始运行&#xff0c;这个程序就变成了一个进程&#xff0c;而一个进程相当于一个或者多个线程。当没有多线程编程时&#xff0c;一个进程相当于一个主线程&#xff1b;当有多线程编程时&#xff0c;一个进…

接手了一个外包开发的项目,我感觉我的头快要裂开了~

嗨&#xff0c;大家好&#xff0c;我是飘渺。 最近&#xff0c;我和小伙伴一起接手了一个由外包团队开发的微服务项目&#xff0c;这个项目采用了当前流行的Spring Cloud Alibaba微服务架构&#xff0c;并且是基于一个“大名鼎鼎”的微服务开源脚手架&#xff08;附带着模块代…

2024年NPDP考试费用明细!报名前必看

随着产品开发和管理在各个行业的发展&#xff0c;产品经理认证&#xff08;NPDP&#xff09;逐渐成为了一项重要的职业资质。NPDP认证由国家引进&#xff0c;并由中国国际人才交流基金会负责在国内推广。本文将详细介绍NPDP的报考条件、费用等等&#xff0c;帮助有意参加该考试…

【工具使用】Keil常用的调试操作整理介绍

目录 一、软件调试使用 1.1 基本调试操作 1.2 调试窗口 二、注意事项 一、软件调试使用 1.1 基本调试操作 上文已经说过在线调试和模拟调试的配置过程&#xff0c;但无论是在线还是模拟调试&#xff0c;调试技巧工具的使用都是一样的。 点击红色d&#xff0c;进入调试 可…

C++ 红黑树的封装

一.map/set的封装 在实现了红黑树的部分功能后&#xff0c;我们可以便可以将红黑树作为底层结构来封装map 和 set &#xff0c;但是问题也随之而来。我们都知道map是k-v的数据模型&#xff0c;而set是k的数据模型&#xff0c;我们难道要去使用两棵红黑树来封装吗&#xff1f;显…

Centos7安装配置nginx

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;小编会及时修改&#xff09; Centos7安装配置nginx Nginx介绍 Nginx (engine x) 是一个高性能的 HTTP 和 反向代理 服务&#xff0c;也…

Element-plus消息框显示不正常解决方案

Element-plus消息框显示不正常解决方案 不知道问题出现在哪里&#xff0c;反正就是点击按钮并没有在页面上弹出对应的框&#xff0c;而是在某个角落显示&#xff0c;经常遇到&#xff0c;老是忘记怎么写&#xff0c;记录一下解决方案 // import ./assets/main.css import /st…

使用MAT分析内存泄漏(mac)

前言 今天主要简单分享下Eclipse的Memory Analyzer在mac下的使用。 一、Mat&#xff08;简称&#xff09;干什么的&#xff1f; 就是分析java内存泄漏的工具。 二、使用步骤 1.下载 mac版的现在也分芯片&#xff0c;别下错了。我这里是M2芯片的&#xff0c;下载的Arch64的。 …

在Mysql中,什么是回表,什么是覆盖索引,索引下推?

一、什么是回表查询&#xff1f; 通俗的讲就是&#xff0c;如果索引的列在 select 所需获得的列中&#xff08;因为在 mysql 中索引是根据索引列的值进行排序的&#xff0c;所以索引节点中存在该列中的部分值&#xff09;或者根据一次索引查询就能获得记录就不需要回表&#x…

WPF前端实现人脸扫描动画效果

前言 本章实现的效果主要通过OpacityMask与LinearGradientBrush(径向渐变) 的组合应用来实现。最终实现效果如下: LinearGradientBrush线性渐变画刷 LinearGradientBrush其实很简单,我们只需要关注5个属性,使用这5个属性你就可以完成这个画刷几乎所有的变化。 属性介…

FOC系列(三)----AS5600磁编码器

一、 关于AS5600 1.1 芯片内部框图和引脚功能介绍 具体的内容大家可以查看数据手册&#xff1a;AS5600数据手册&#xff0c;在这里只是对一下重要的地方进行说明。    系统框图如下&#xff1a;    电源设计选项&#xff0c;我在设计时选择的是第二种电源方案&#xff0c…

推荐6款交互设计软件,助你事半功倍!

交互软件可以帮助设计师从“可用性”和“用户体验”的角度优化他们的作品。如果设计师想创建一个令人满意的交互设计作品&#xff0c;一个方便的交互设计软件是必不可少的。当然&#xff0c;交互软件只是我们实现目标的一种手段。根据设计师的个人喜好和方便&#xff0c;选择易…

可以免费使用的Axure在线版来了

Axure作为一种功能强大的原型设计工具&#xff0c;一直受到设计师的青睐。然而&#xff0c;其高昂的价格可能成为一个门槛&#xff0c;限制了一些设计师的选择。但不用担心&#xff0c;现在有一个免费的Axure在线工具即时设计&#xff0c;功能更完整&#xff0c;更划算&#xf…

基于字面的文本相似度计算和匹配搜索

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…

Moonsong Labs:融合创业工作室与协议工程专业知识的全新实验室

在这个科技不断变革的世界中&#xff0c;我们很高兴介绍Moonsong Labs — — 一个提供创业工作室和工程服务的实验室。共同塑造当今的创新&#xff0c;同时预测明天的技术风口。在Moonsong Labs&#xff0c;我们的创业工作室和工程专业知识汇聚在一起&#xff0c;推动各种项目&…

基于PaddleOCR银行卡识别实现(三)

前言 基于PaddleOCR银行卡识别实现&#xff08;一&#xff09; 基于PaddleOCR银行卡识别实现&#xff08;二&#xff09; 前两篇文章讲了检测模型和识别模型的实现&#xff0c;这一篇文章姗姗来迟&#xff0c;将讲解下两个模型的串联应用和PaddleOCR的源码精简&#xff0c;下面…

陪诊系统:基于自然语言处理的患者沟通创新

医疗领域的数字化转型正日益引入创新技术&#xff0c;其中基于自然语言处理&#xff08;NLP&#xff09;的陪诊系统成为提升患者沟通的一项关键技术。本文将深入研究这一领域&#xff0c;介绍陪诊系统如何借助NLP实现患者沟通的创新&#xff0c;并提供一个简单的Python代码示例…