当前位置: 首页 > news >正文

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礼品卡订阅&#xff0c;目前最经济实惠的订阅方式&#xff0c;具体操作步骤 使用IOS设备充值&#xff0c;用 App Stroe 兑换券 1、支付宝地址切换旧金山&#xff0c;在里面买app store 的兑换卷 2、美区Apple ID登陆app store &#xff0c;充值兑换券 3、IOS设…...

富格林:正确杜绝欺诈实现出金

富格林悉知&#xff0c;现货黄金一直以来都是投资者们追逐的热门品种之一。其安全性和避险特性吸引着广大投资者。但在现货黄金市场中要想实现出金其实并不简单&#xff0c;是需要我们通过一定的技巧和方法去正确杜绝欺诈套路。下面为了帮助广大投资者正确杜绝欺诈实现出金&…...

基于java,SpringBoot和VUE的求职招聘简历管理系统设计

摘要 基于Java, Spring Boot和Vue的求职招聘管理系统是一个为了简化求职者与雇主间互动流程而设计的现代化在线平台。该系统后端采用Spring Boot框架&#xff0c;以便快速搭建具有自动配置、安全性和事务管理等特性的RESTful API服务&#xff0c;而前端则使用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惹的祸

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、问题&#xff1a;df.plot() 显示不出图像二、尝试各种解决办法1. 增加matplotlib.use&#xff0c;设定GUI2. 升级matplotlib版本 三、numpy是个重要的库1. …...

【AIGC】1、爆火的 AIGC 到底是什么 | 全面介绍

文章目录 一、AIGC 的简要介绍二、AIGC 的发展历程三、AIGC 的基石3.1 基本模型3.2 基于人类反馈的强化学习3.3 算力支持 四、生成式 AI&#xff08;Generative AI&#xff09;4.1 单模态4.1.1 生成式语言模型&#xff08;Generative Language Models&#xff0c;GLM&#xff0…...

云计算技术概述_3.云计算的部署方式

根据NIST的定义&#xff0c;云计算从部署模式上看可以分为公有云、社区云、私有云和混合云四种类型。 注&#xff1a;NIST&#xff08;美国国家标准与技术研究院&#xff09;是美国商务部下属的一个物理科学实验室和非监管机构。 其任务是促进创新和行业竞争力。 NIST 将其活动…...

简述 BIO 、NIO 模型

BIO : 同步阻塞I/O&#xff08;Block IO&#xff09; 服务器实现模式为每一个连接一个线程&#xff0c;即客户端有连接请求时服务器就需要启动一个线程进行处理&#xff0c;如果这个连接不做任何事情会造成不必要的线程开销&#xff0c;此处可以通过线程池机制进行优化。 impo…...

【Python小练】随机验证码

题目 提示输出含数字、字母的四位随机数&#xff0c;输入提示的验证码进行验证&#xff0c;验证码正确结束程序&#xff0c;验证码错误继续输入。 分析 我们可以通过random模块生成0到9的随机数&#xff0c;也可以通过生成65到90的随机数&#xff0c;将65到90的随机ASCLL码转换…...

《1w实盘and大盘基金预测 day30》

今日预测&#xff1a; 3123-3150-3177 探底回升&#xff0c;震荡上涨&#xff0c;收小红小绿 双创指数后期上涨的幅度也是会大于上证的&#xff0c;四月底的时候就提醒建仓。 关注板块&#xff1a;医疗、地产、电力、证券 这周预测 这周上证指数最高看到3200 继续看涨&#…...

软件工程案例学习-图书管理系统-面向对象方法

文档编号&#xff1a;LMS_1 版 本 号&#xff1a;V1.0 ** ** ** ** ** ** 文档名称&#xff1a;需求分析规格说明书 项目名称&#xff1a;图书管理系统 项目负责人&#xff1a;计敏 胡杰 ** ** …...

python:机器学习特征优选(过滤法)

作者:CSDN @ _养乐多_ 本文将介绍如何使用 python 语言使用过滤法进行机器学习特征优选。分别有F值、互信息(Mutual Information,MI)、方差阈值(Variance Threshold,VT)、相关性方法。 文章目录 一、特征数据1.1 将用于分析的数据从GEE下载到本地1.2 从其他方法获取二、…...

CH32V 系列 MCU IAP 使用函数形式通过传参形式灵活指定APP跳转地址

参考: CH32V 系列 MCU IAP 升级跳转方法 CH32V103 的 IAP 问题&#xff08;跳转及中断向量表重定位&#xff09; 1. 沁恒的RISC-V内核MCU的IAP跳转示例程序简要分析 沁恒的RISC-V内核的MCU比如CH32V203、CH32V307等系列的EVT包中IAP升级的示例程序中都是通过使能软件中断之后&…...

教程分享:如何为跨境电商、外贸、国际展会制作二维码?

不论是做跨境电商、在全球做产品推广&#xff0c;还是国外的餐厅运营、参加国际展会&#xff0c;或者是做创意户外广告、制作个性化的个人名片、有趣的产品包装……只要是在国外使用二维码&#xff0c;你都可以在QR Tiger去制作您需要的二维码&#xff01; 一、认识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. 判定字符是否唯一 - 力扣&#xff08;LeetCode&#xff09; 解析 题解 class Solution { public:bool isUnique…...

ZCC5503 18V 1A 6uA低静态功耗 同步降压控制器

1. 概要 ZCC5503R 是一款基准电压源、振荡电路、 比较器 PWM/PFM 控制器构成的 CMOS 降压电路调整器&#xff0c;利用 PWM/PFM 自动切换控制电路达到可调占空比&#xff0c;具有全输入电压范围&#xff08;3~18V &#xff09;内的低纹波、高效率及大电流输出等特点. 2. 产…...

python操作minio中常见错误

因为我参考minio的文档操作&#xff0c;当时文档并不是很详细&#xff0c;这篇博文会统一记录自己所遇到的问题。以下的每个标题都是具体的错误信息。 minio-py文档 错误1:SSL: WRONG_VERSION_NUMBER 这个错误的原因是在创建minio的客户端时候没有关闭SSL&#xff0c;请使用如…...

SpringCloud-Seata分布式事务的环境搭建搭建

目录 一、版本说明 二、建立Seata Server数据库&#xff08;TC-带头大哥的数据库&#xff09; 三、业务库建表 四、安装Seata-Server 4.1 虚拟机里新建一个/opt/seate/seata-server文件夹&#xff0c;在seate文件夹下新建一个docker-compose.yml 文件 4.2 运行容器 4.3 在na…...

ChatGPT4 Turbo 如何升级体验?官网如何使用最新版GPT-4 Turbo?

本文会教大家如何教大家升级自己的GPT4到GPT4 Turbo&#xff0c;同时检验自己的GPT4 Turbo是否是最新版本的GPT-4-Turbo-2024-04-09 说明 新版GPT-4 Turbo再次重夺大模型排行榜王座&#xff0c;超越了Claude 3 Opus。 最新版本的GPT-4 Turbo被命名为GPT-4-Turbo-2024-04-09。…...

如何利用工作流自定义一个AI智能体

选择平台 目前已经有不少大模型平台都提供自定义智能体的功能&#xff0c;比如 百度的文心 https://agents.baidu.com/ 阿里的百炼平台 https://bailian.console.aliyun.com/。 今天再来介绍一个平台扣子&#xff08;https://www.coze.cn/&#xff09;&#xff0c;扣子是…...

嵌入式学习day12

每日面试题 static 关键字在 全局变量、局部变量、函数的区别&#xff1f; ①全局变量static&#xff1a;改变作用域&#xff0c;改变&#xff08;限制&#xff09;其使用范围。 只初始化一次&#xff0c;防止在其他文件单元中被引用。全局变量的作用域是整个源程序&#xff…...

【Leetcode 42】 接雨水-单调栈解法

基础思路&#xff1a; 维持栈单调递减&#xff0c;一旦出现元素大于栈顶元素&#xff0c;就可以计算雨水量&#xff0c;同时填坑&#xff08;弹出栈顶元素&#xff09; 需要注意&#xff1a; 单调栈通常保存的是下标&#xff0c;用于计算距离 public static int trap2(int[…...

Python 贪吃蛇

文章目录 效果图&#xff1a;项目目录结构main.pygame/apple.pygame/base.pygame/snake.pyconstant.py 效果图&#xff1a; 项目目录结构 main.py from snake.game.apple import Apple # 导入苹果类 from snake.game.base import * # 导入游戏基类 from snake.game.snake im…...

计算机网络 2.4差错检验与校正

第四节 差错检验与校正 一、认识检验与校正 1.差错形成原因 内部因素&#xff08;随机错&#xff09;&#xff1a;噪声脉冲、脉动噪声、衰减、延迟失真等。 外部因素&#xff08;突发错&#xff09;&#xff1a;电磁干扰、太阳噪声、工业噪声等。 2.差错控制编码分类&#…...

uniapp遍历数组对象的常见方法

在 UniApp 中&#xff0c;遍历数组对象的方法与在普通 JavaScript 中是相同的。UniApp 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;因此你可以使用 Vue.js 和 JavaScript 的语法来遍历数组对象。 以下是一些常见的遍历数组对象的方法&#xff1a; 使用 for 循环 …...

Milvus向量数据库(一)Milvus存储byte[]类型源向量数据

两种路线&#xff1a; 第一种是把byte[]转换为List< float >&#xff0c;然后存储到Milvus的floatVector中第二种是把byte[]转换为ByteBuffer&#xff0c;然后存储到Milvus的BinaryVector中 步骤&#xff1a; 我先用的是第一种&#xff0c;但是在转换float过程中&…...

Jupyter Notebook魔术命令

Jupyter Notebook是一个基于网页的交互式笔记本&#xff0c;支持运行多种编程语言。 Jupyter Notebook 的本质式一个Web应用程序&#xff0c;便于创建和共享文学化程序文档&#xff0c;支持实现代码&#xff0c;数学方程&#xff0c;可视化和markdown。用途包括&#xff1a;数据…...

python基础---生成器

生成器 这个老师的课 这个老师的网页 获取系列有规律但是个数不确定的数据 使用迭代器的时候可以使用一个不会产生异常的迭代器, 实际记录的是生成的数据的方式, 不是实际的数据 使用迭代器的时候这一个规则的改变不方便, 需要加一个专门的方法 还有就是如果需要大量的数据,…...

网页微博/淘宝关键词排名优化技巧

#!/usr/bin/env python#-*-coding:utf-8-*-#用Python实现FTP暴力破解#网络编程#套接字socket#BSD UNIX的进程通信机制import socket,sysdef Connect(username,password):<span style"white-space:pre"> </span>ssocket.socket(socket.AF_INET,socket.SOC…...

网站后台系统/营销方式

Amazon Prime members have access to a slew of features beyond free shipping. If you use Twitch, you could be missing out on exclusive in-game content and free bonus games each month. 除了免费送货&#xff0c;Amazon Prime会员还可以使用其他功能 。 如果您使用T…...

九寨沟城乡建设官方网站/淘宝网店怎么运营起来

梦到我、我爹和我妈三个人去了越南&#xff0c;住在一家简陋的宾馆里&#xff0c;晚上睡觉的时候我妈为了省钱让我们打地铺&#xff0c;点蜡烛。等天亮了我一个人出去溜达&#xff0c;发现越南人和中国人长的没什么两样&#xff0c;就是穿着打扮不同一些&#xff0c;我看到越南…...

杭州网站建设公司/巩义网站优化公司

序、为什么是CoffeeScript用过JavaScript的人&#xff0c;都被他繁琐的括号语法&#xff08;各种(){}[]各种嵌套&#xff09;搞得头痛不已&#xff0c;还有各种乱七八糟不好用的特性&#xff08;比如全局变量名字冲突&#xff0c;只有函数访问域&#xff0c;this问题&#xff0…...

个人网站的设计和建设/网站优化公司怎么选

为什么80%的码农都做不了架构师&#xff1f;>>> JDK1.5新特性&#xff1a; 1. 自动装箱自动拆箱 2. 枚举类型 3. 泛型 4. 可变参数 5. 内省 6. For-Each循环 7. 静态导入 JDK1.6新特性&#xff1a; 1. Complier API 2. 用Console开发控制台程序 JDK1.7新特性&#…...

怎么注册网站个人/seo网络推广招聘

一&#xff0c;引例 问题&#xff1a;把一个字节逆置&#xff0c;要求用移位的方法 unsigned char ch 八位 思路一&#xff1a;初始一个unsigned char temp0; 用1分别左移 0--7位跟ch 相与&#xff0c;如果大于零&#xff0c;则在7-i(相对应的位置置1否则置0) #include <ios…...