iconfont 使用彩色图标

news2024/11/18 16:23:39

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.coloradmin.cn/o/1264272.html

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

相关文章

二叉树之推排序(升序)

目录 1.思路1.1大堆的建立方法1.2排序的方法 2.代码实现以及测试代码 1.思路 如何将一个堆进行排序&#xff0c;并变成升序&#xff1f;首先&#xff0c;如果要完成升序&#xff0c;那我们可以建立一个大堆&#xff0c;因为大堆可以选出一个最大的值放在堆的最上面&#xff0c…

舞蹈店管理系统服务预约会员小程序效果如何

舞蹈的作用很广&#xff0c;也有大量求学者&#xff0c;每个城市也有大小各异的舞蹈品牌店&#xff0c;他们承接商演、也会教学员、宣传拓展生意等&#xff0c;因此近些年来&#xff0c;随着互联网深入及短视频&#xff0c;舞蹈业市场规模也在增加。 而在门店经营中&#xff0…

Go 编程语言详解:用途、特性、与 Python 和 C++ 的比较

什么是Go? Go是一个跨平台、开源的编程语言Go可用于创建高性能应用程序Go是一种快速、静态类型、编译型语言&#xff0c;感觉上像动态类型、解释型语言Go由Robert Griesemer、Rob Pike和Ken Thompson于2007年在Google开发Go的语法类似于C Go用于什么&#xff1f; Web开发&…

QT中的 容器(container)-大全

一、介绍 Qt库提供了一套通用的基于模板的容器类&#xff0c;可以用这些类存储指定类型的项。比如&#xff0c;你需要一个大小可变的QString的数组&#xff0c;则使用QVector<QString>。 这些容器类比STL&#xff08;C标准模板库&#xff09;容器设计得更轻量、更安全并…

快速了解Spring AOP的概念及使用

文章目录 1. AOP概念1.1 什么是AOP&#xff1f;1.2 什么是Spring AOP&#xff1f; 2. Spring AOP的使用2.1 引入Spring AOP依赖2.2 编写AOP程序 3. Spring AOP详解3.1 Spring AOP核心概念1. 切点&#xff08;Pointcut&#xff09;2. 连接点&#xff08;Join Point&#xff09;3…

Linux系统编程 day06 进程间通信

进程间通信 1. 进程间通信的概念2. 匿名管道pipe3. 命名管道FIFO4. 内存映射区 1. 进程间通信的概念 在Linux的环境下&#xff0c;进程地址空间是相互独立的&#xff0c;每个进程有着各自不同的用户地址空间。一个进程不能访问另一个进程中的内容&#xff0c;要进行数据交换必…

[MySQL--基础]函数、约束

hello! 这里是欧_aita的频道。 今日语录:不管你觉得自己能做什么&#xff0c;或者你觉得你不能做什么&#xff0c;你都是对的。 祝福语&#xff1a;愿你的程序像太阳一样明亮&#xff0c;给世界带来温暖和光明。 大家可以在评论区畅所欲言&#xff0c;可以指出我的错误&#xf…

雷达公式实现(matlab)

雷达公式实现 代码来源&#xff1a;《雷达系统分析与设计(MATLAB版)(第三版)》 function [snr] radar_eq(pt,freq,g,sigma,b,nf,loss,range) % This program implements Eq.(1.63) %% Inputs:% pt——峰值功率&#xff0c;W% freq——雷达中心频率&#xff0c;Hz% g——天线…

Javaweb之Vue组件库Element之Form表单的详细解析

4.3.4 Form表单 4.3.4.1 组件演示 Form 表单&#xff1a;由输入框、选择器、单选框、多选框等控件组成&#xff0c;用以收集、校验、提交数据。 表单在我们前端的开发中使用的还是比较多的&#xff0c;接下来我们学习这个组件&#xff0c;与之前的流程一样&#xff0c;我们首…

AI 重构工业制造的故事 我们从大模型开始讲起

在数字化浪潮的推动下&#xff0c;工业制造领域正经历着一场前所未有的变革。人工智能&#xff08;AI&#xff09;作为这场变革的关键推动者之一&#xff0c;正以惊人的速度颠覆传统制造业。而大模型作为AI时代最先进的科技工具之一&#xff0c;或将成为引领这场变革的利器&…

零基础学Python第三天||写一个简单的程序

通过对四则运算的学习&#xff0c;已经初步接触了Python中内容&#xff0c;如果看官是零基础的学习者&#xff0c;可能有点迷惑了。难道敲几个命令&#xff0c;然后看到结果&#xff0c;就算编程了&#xff1f;这也不是那些能够自动运行的程序呀&#xff1f; 的确。到目前为止…

C语言错误处理之“非局部跳转<setjmp.h>头文件”

目录 前言 setjmp宏 longjmp函数 使用方法&#xff1a; 实例&#xff1a;测试setjmp与longjmp的使用 前言 通常情况下&#xff0c;函数会返回到它被调用的位置&#xff0c;我们无法使用goto语句改变它的返回的方向&#xff0c;因为goto语句只能跳转到同一函数内的某个标号…

数字档案馆档案咨询工作内容有哪些

档案咨询通常是指关于如何管理、存储、保护档案资料的问题。随着电子档案的日渐兴起&#xff0c;数字档案馆室的建设也是如火如荼&#xff0c;随之数字档案馆档案咨询的工作也逐渐增多。以下就是专久智能关于数字档案馆档案咨询工作内容有哪些的简要介绍&#xff1a; 1. 提供档…

软著项目推荐 深度学习动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

【3D程序软件】SideFX与上海道宁一直为设计师提供程序化 3D动画和视觉效果工具,旨在创造高质量的电影效果

Houdini是一个 从头开始构建的程序系统 使艺术家能够自由工作 创建多次迭代 并与同事快速共享工作流程 Houdini FX为 视觉特效艺术家创作故事片 广告或视频游戏 凭借其基于程序节点的工作流程 Houdini FX可让 您更快地创建更多内容 从而缩短时间并 在所有创意任务中…

微信可以添加多少好友?

不知道有没有小伙伴好奇&#xff0c;微信到底可以添加多少好友&#xff1f;正好这个话题也上热搜了&#xff0c;我们就来了解一下。 有网友表示&#xff0c;自己的微信好友数量有10004个&#xff0c;已经不能再添加新的微信好友了。 一个微信号&#xff0c;可以添加的好友上限…

数字阅读用户规模持续增长 5.3亿人享受数字化阅读便利

近日,鲁迅长孙周令飞在接受采访时表示,自己“现在90%的时间刷视频,10%的时间看书”,引发网友热议。不少网友表示,鲁迅的孙子都花90%的时间刷视频,难怪现在没人看书了,其实这并不奇怪,也并不表明没人看书,而是读屏与读书并重的时代,纸质阅读与数字阅读共同构成了日常的阅读模式。…

51单片机项目(17)——基于51单片机的双机通信系统

1.功能设计 本次实现的功能如下&#xff1a; 发送端通过串口向接收端循环发送字符0~F&#xff0c;并且实时显示在数码管上 接收端通过串口接收数据&#xff0c;将接收到的数据实时显示在数码管上。 &#xff08;需要完整工程的移步至最后 包括发送端代码 接收端代码 仿真图…

脚本绑邦引流脚本拓客软件短视频获客直播间截流抖音快手小红书自动引流关注点赞私信评论截流涨粉

一、引流脚本是什么&#xff1f; 引流脚本是一种自动化的工具&#xff0c;可以帮助你在各​种短视频、​社交媒体平台上进行批量关注、点赞、私信、评论等操作&#xff0c;从而吸引更多的流量和粉丝。通过引流脚本&#xff0c;你可以自动化地执行各种操作&#xff0c;解放双手…

概要设计检查单、需求规格说明检查单

1、概要设计检查表 2、需求规格说明书检查表 概要&#xff08;结构&#xff09;设计检查表 工程名称 业主单位 承建单位 检查依据 1、设计方案、投标文件&#xff1b;2、合同&#xff1b;3、信息系统相关技术标准及安全规范&#xff1b; 检查类目 检查内容 检查…