web前端学习笔记7-iconfont使用
7. iconfont的使用流程
-
字体图标使用较多的是阿里巴巴iconfont图标库，它是阿里巴巴体验团队推出的图标库和图标管理平台，提供了大量免费和可定制的矢量图标，以满足网页设计、平面设计、UI设计、应用程序开发和其他创意项目的需求。
-
官方网站：https://www.iconfont.cn/
-
使用字体图标时注意的是 字体 不是 图片，所有设计样式时使用的字体样式，而不是图片样式
-
本案例是把资源全部下载后导入项目的使用流程
7.1 注册账号
-
打开官方网站：https://www.iconfont.cn/register
-
注册界面，输入用户电话号码，注册即可，如下：
-
注册之后进登录：
-
登录成功后，进入主页面
7. 2 搜索图标
-
登录成功后，开始搜索项目需要的图标
-
回车后进入图标列表页面
-
选中图标添加到购物车
-
点击购物车查看选中的图标
7.3 添加至项目
- 点击下图 添加至项目 按钮，添加图标到项目中
- 添加资源到已有项目或新建项目
- 添加后项目如下图所示
7.4 下载资源
-
点击 下载至本地， 按钮把字体图标所有的资源下载到计算机
-
下载后的资源如下图所示
7.5 引入项目
-
把下载的所有资源存放到项目中的icons目录下，如下图
-
在html页面中引入iconfont.css文件: <link rel=“stylesheet” href=“icons/iconfont.css” />
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><title>字体图标使用</title><link rel="shortcut icon" href="favicon.svg" type="image/x-icon" /><link rel="stylesheet" href
相关文章：
web前端学习笔记7-iconfont使用
7. iconfont的使用流程 字体图标使用较多的是阿里巴巴iconfont图标库，它是阿里巴巴体验团队推出的图标库和图标管理平台，提供了大量免费和可定制的矢量图标，以满足网页设计、平面设计、UI设计、应用程序开发和其他创意项目的需求。 官方网站：https://www.iconfont.cn/ 使用…...
国内小白用什么方法充值使用ChatGPT4.0？
首先说一下IOS礼品卡订阅，目前最经济实惠的订阅方式，具体操作步骤 使用IOS设备充值，用 App Stroe 兑换券 1、支付宝地址切换旧金山，在里面买app store 的兑换卷 2、美区Apple ID登陆app store ，充值兑换券 3、IOS设…...
富格林：正确杜绝欺诈实现出金
富格林悉知，现货黄金一直以来都是投资者们追逐的热门品种之一。其安全性和避险特性吸引着广大投资者。但在现货黄金市场中要想实现出金其实并不简单，是需要我们通过一定的技巧和方法去正确杜绝欺诈套路。下面为了帮助广大投资者正确杜绝欺诈实现出金&…...
基于java,SpringBoot和VUE的求职招聘简历管理系统设计
摘要 基于Java, Spring Boot和Vue的求职招聘管理系统是一个为了简化求职者与雇主间互动流程而设计的现代化在线平台。该系统后端采用Spring Boot框架，以便快速搭建具有自动配置、安全性和事务管理等特性的RESTful API服务，而前端则使用Vue.js框架构建动…...
sqlserver数据库日志文件log.ldf文件占用过大清除的办法
sqlserver数据库日志文件log.ldf文件占用过大清除的办法 技术交流 http://idea.coderyj.com/ 1.清除数据库日志的方法 --- 查看数据库日志文件名 USE cs GO SELECT file_id, name,size,* FROM sys.database_files;ps 可以看到其中name字段为数据库日志名称"数据库日志名称…...
【Python小技巧】matplotlib不显示图像竟是numpy惹的祸
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、问题：df.plot() 显示不出图像二、尝试各种解决办法1. 增加matplotlib.use，设定GUI2. 升级matplotlib版本 三、numpy是个重要的库1. …...
【AIGC】1、爆火的 AIGC 到底是什么 | 全面介绍
文章目录 一、AIGC 的简要介绍二、AIGC 的发展历程三、AIGC 的基石3.1 基本模型3.2 基于人类反馈的强化学习3.3 算力支持 四、生成式 AI（Generative AI）4.1 单模态4.1.1 生成式语言模型（Generative Language Models，GLM࿰…...
云计算技术概述_3.云计算的部署方式
根据NIST的定义，云计算从部署模式上看可以分为公有云、社区云、私有云和混合云四种类型。 注：NIST（美国国家标准与技术研究院）是美国商务部下属的一个物理科学实验室和非监管机构。 其任务是促进创新和行业竞争力。 NIST 将其活动…...
简述 BIO 、NIO 模型
BIO : 同步阻塞I/O（Block IO） 服务器实现模式为每一个连接一个线程，即客户端有连接请求时服务器就需要启动一个线程进行处理，如果这个连接不做任何事情会造成不必要的线程开销，此处可以通过线程池机制进行优化。 impo…...
【Python小练】随机验证码
题目 提示输出含数字、字母的四位随机数，输入提示的验证码进行验证，验证码正确结束程序，验证码错误继续输入。 分析 我们可以通过random模块生成0到9的随机数，也可以通过生成65到90的随机数，将65到90的随机ASCLL码转换…...
《1w实盘and大盘基金预测 day30》
今日预测： 3123-3150-3177 探底回升，震荡上涨，收小红小绿 双创指数后期上涨的幅度也是会大于上证的，四月底的时候就提醒建仓。 关注板块：医疗、地产、电力、证券 这周预测 这周上证指数最高看到3200 继续看涨&#…...
软件工程案例学习-图书管理系统-面向对象方法
文档编号：LMS_1 版 本 号：V1.0 ** ** ** ** ** ** 文档名称：需求分析规格说明书 项目名称：图书管理系统 项目负责人：计敏 胡杰 ** ** …...
python：机器学习特征优选（过滤法）
作者：CSDN @ _养乐多_ 本文将介绍如何使用 python 语言使用过滤法进行机器学习特征优选。分别有F值、互信息（Mutual Information，MI）、方差阈值（Variance Threshold，VT）、相关性方法。 文章目录 一、特征数据1.1 将用于分析的数据从GEE下载到本地1.2 从其他方法获取二、…...
CH32V 系列 MCU IAP 使用函数形式通过传参形式灵活指定APP跳转地址
参考: CH32V 系列 MCU IAP 升级跳转方法 CH32V103 的 IAP 问题（跳转及中断向量表重定位） 1. 沁恒的RISC-V内核MCU的IAP跳转示例程序简要分析 沁恒的RISC-V内核的MCU比如CH32V203、CH32V307等系列的EVT包中IAP升级的示例程序中都是通过使能软件中断之后&…...
教程分享：如何为跨境电商、外贸、国际展会制作二维码？
不论是做跨境电商、在全球做产品推广，还是国外的餐厅运营、参加国际展会，或者是做创意户外广告、制作个性化的个人名片、有趣的产品包装……只要是在国外使用二维码，你都可以在QR Tiger去制作您需要的二维码！ 一、认识QR Tiger 二…...
ComfyUI 基础教程（十三）：ComfyUI-Impact-Pack 面部修复
SD的WebUI 中的面部修复神器 ADetailer，无法在ComfyUI 中使用。那么如何在ComfyUI中进行面部处理呢？ComfyUI 中也有几个面部修复功能，比如ComfyUI Impact Pack（FaceDetailer），以及换脸插件Reactor和IPAdapter。 ComfyUI-Impact-Pack 是一个功能强大的插件，专为 ComfyUI …...
专题五_位运算(2)
目录 面试题 01.01. 判定字符是否唯一 解析 题解 268. 丢失的数字 解析 题解 371. 两整数之和 解析 题解 面试题 01.01. 判定字符是否唯一 面试题 01.01. 判定字符是否唯一 - 力扣（LeetCode） 解析 题解 class Solution { public:bool isUnique…...
ZCC5503 18V 1A 6uA低静态功耗 同步降压控制器
1. 概要 ZCC5503R 是一款基准电压源、振荡电路、 比较器 PWM/PFM 控制器构成的 CMOS 降压电路调整器，利用 PWM/PFM 自动切换控制电路达到可调占空比，具有全输入电压范围（3~18V ）内的低纹波、高效率及大电流输出等特点. 2. 产…...
python操作minio中常见错误
因为我参考minio的文档操作，当时文档并不是很详细，这篇博文会统一记录自己所遇到的问题。以下的每个标题都是具体的错误信息。 minio-py文档 错误1:SSL: WRONG_VERSION_NUMBER 这个错误的原因是在创建minio的客户端时候没有关闭SSL，请使用如…...
SpringCloud-Seata分布式事务的环境搭建搭建
目录 一、版本说明 二、建立Seata Server数据库（TC-带头大哥的数据库） 三、业务库建表 四、安装Seata-Server 4.1 虚拟机里新建一个/opt/seate/seata-server文件夹，在seate文件夹下新建一个docker-compose.yml 文件 4.2 运行容器 4.3 在na…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
【JVM】Java虚拟机（二）——垃圾回收
目录 一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法 二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四ÿ…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...