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="css/common.css&#

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

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

相关文章

大数据毕业设计Python+Django旅游景点评论数据采集分析可视化系统 NLP情感分析 LDA主题分析 bayes分类 旅游爬虫 旅游景点评论爬虫 机器学习 深度学习 人工智能 计算机毕业设计

毕业论文&#xff08;设计&#xff09;开题报告 学生姓名 学 号 所在学院 信息工程学院 专 业 指导教师姓名 指导教师职称 工程师 助教 指导教师单位 论文&#xff08;设计&#xff09;题目 基于朴素贝叶斯算法旅游景点线上评价情感分析 开 题 报 告…

Nginx从入门到精通速成

文章目录 一. **Nginx** **的简介**1.1 什么是 **nginx**1.2 正向代理1.3 反向代理1.4 **负载均衡**1.5 动静分离 二. **Nginx** **的安装**三. **Nginx** **的常用的命令**四. **Nginx** **的配置文件**五. **Nginx** **配置实例**反向代理实例**1**5.1 实现效果5.2 准备工作5…

计算机视觉——OpenCV Otsu阈值法原理及实现

算法简介 Otsu阈值法&#xff0c;也被称为大津算法&#xff0c;是一种在图像处理中广泛使用的自动阈值分割技术。这种方法由日本学者大津展之于1979年提出&#xff0c;旨在根据图像的灰度直方图来自动选择最佳全局阈值。Otsu阈值法的核心思想是最小化类内方差或最大化类间方差…

数据结构 第七章 图(一)

&#x1f680; 【考纲要求】图的基本概念 一、图的基本概念 1.1 图的定义 图由顶点和边组成&#xff0c;所以我们在表示一个图的时候&#xff0c;使用 G ( V , E ) G(V,E) G(V,E)&#xff0c;来表示一个G图&#xff0c;其中的V表示G图中的顶点&#xff0c;E表示G图中的边&am…

【SAP ME 35】SAP ME DEBUG模式开启

1、Debug基础参数配置 2、NWDS Debug模式开启 3、Debug模式下删除锁&#xff08;如果以上尝试无效&#xff0c;就执行删除锁&#xff09; 找到对应的锁任务进行删除&#xff01; -------------------------------------------------------------- SAP ME涉及问题较多&#…

(MATLAB)安装指南

参考链接&#xff1a;MATLAB2019a安装教程&#xff08;避坑版&#xff09;

MySQL 高级 - 第二章 | 数据库目录结构与文件系统

目录 前言一、数据库主要目录结构1.1 数据目录路径1.2 相关命令目录1.3 配置文件路径 二、数据库和文件系统的关系2.1 默认数据库2.2 数据库在文件系统中的表示2.3 数据表在文件系统中的表示2.3.1 InnoDB 存储引擎模式2.3.2 MyISAM 存储引擎模式 2.4 视图在文件系统中的表示2.5…

基于FPGA的多路彩灯控制器VHDL代码Quartus仿真

名称&#xff1a;基于FPGA的多路彩灯控制器VHDL代码Quartus仿真&#xff08;文末获取&#xff09; 软件&#xff1a;Quartus 语言&#xff1a;VHDL 代码功能&#xff1a; 多路彩灯控制器 综合训练内容要求 设计一台基于FPGA的多路彩灯控制器的设计。要求如下 1.彩灯从左…

怎样扫描二维码后看图片?图片二维码的制作方式

二维码是一种可以用来存储大量内容&#xff0c;通过扫描二维码的方式来向其他人提供内容&#xff0c;比较常见的展示内容有视频、图片、文件、文本、音频等。那么图片生成二维码的方法是什么样的呢&#xff1f;通过扫码查看图片&#xff0c;可以不下载的图片的同时快速预览内容…

工控人机交互界面编辑软件附描述(电脑软件分享)

HMI 概述&#xff1a;本文为分享型文档 本文摘要 昆仑通泰触摸屏软件分享。   给触摸屏下载程序时使用。   本人用过案例西门子s7-1200/200smart ST30与触摸屏型号“TPC1061Ti”通讯。 文章目录 本文摘要1.MCGS组态环境嵌入式版&#xff0c;大部分人用过此款&#xff0c;容…

JavaScript余数运算符

console.log(5 % 2); //5 2 * 2 1 console.log(8 % 3); //8 2 * 3 2 console.log(6 % 2); //6 2 * 3 0 console.log(7 % 2); //7 2 * 3 1● 我们可以利用这个特性来判断一个数是奇数还是偶数 const isEven n >n % 2 0 ? console.log(${n}是偶数) : console.…

麦肯锡精英高效阅读法笔记

系列文章目录 如何有效阅读一本书笔记 读懂一本书笔记 麦肯锡精英高效阅读法笔记 文章目录 系列文章目录序章 无法读书的5个理由无法读书的理由① 忙于工作&#xff0c;没时间读书无法读书的理由② 不知应该读什么无法读书的理由③ 没读完的书不断增多无法读书的理由④ 工作繁…

在2-3-4树上实现连接与分裂操作的算法与实现

在2-3-4树上实现连接与分裂操作的算法与实现 引言1. 维护2-3-4树结点的高度属性伪代码示例 2. 实现连接操作伪代码示例 3. 证明简单路径p的划分性质4. 实现分裂操作伪代码示例 C代码示例结论 引言 2-3-4树是一种平衡搜索树&#xff0c;它保证了树的高度被有效控制&#xff0c;…

GhostNetV2 Enhance Cheap Operation with Long-Range Attention 论文学习

论文地址&#xff1a;https://arxiv.org/abs/2211.12905 代码地址&#xff1a;https://github.com/huawei-noah/Efficient-AI-Backbones/tree/master/ghostnetv2_pytorch 解决了什么问题&#xff1f; 在计算机视觉领域&#xff0c;深度神经网络在诸多任务上扮演着重要角色。为…

机器学习实践:超市商品购买关联规则分析

第2关&#xff1a;动手实现Apriori算法 任务描述 本关任务&#xff1a;编写 Python 代码实现 Apriori 算法。 相关知识 为了完成本关任务&#xff0c;你需要掌握 Apriori 算法流程。 Apriori 算法流程 Apriori 算法的两个输人参数分别是最小支持度和数据集。该算法首先会生成所…

【最大公约数 并集查找 调和级数】1998. 数组的最大公因数排序

本文涉及知识点 最大公约数 并集查找 调和级数 LeetCode1998. 数组的最大公因数排序 给你一个整数数组 nums &#xff0c;你可以在 nums 上执行下述操作 任意次 &#xff1a; 如果 gcd(nums[i], nums[j]) > 1 &#xff0c;交换 nums[i] 和 nums[j] 的位置。其中 gcd(nums…

面试经验分享 | 蓝队面试经验

关于蓝队面试经验 1.自我介绍能力 重要性 为什么将自我介绍能力放在第一位&#xff0c;实际上自我介绍才是面试中最重要的一点&#xff0c;因为护网面试并没有确定的题目&#xff0c;让面试官去提问 更多是的和面试官的一种 “交谈” &#xff0c;面试的难易程度也自然就取决…

三维点云处理-模型拟合

以直线拟合为例&#xff0c;模型拟合常用的方法有Least Square&#xff08;最小二乘&#xff09;、Hough Transform&#xff08;霍夫变换&#xff09;、Random Sample Consensus&#xff08;RANSAC&#xff09;等。那么该如何区分和使用这几种方法呢&#xff1f; 情况1&#x…

基于springboot实现夕阳红公寓管理系统项目【项目源码+论文说明】

基于springboot实现夕阳红公寓管理系统演示 摘要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是…

深入理解Java虚拟机(JVM)

引言&#xff1a; Java虚拟机&#xff08;JVM&#xff09;是Java平台的核心组件&#xff0c;它负责将Java字节码转换成平台特定的机器指令&#xff0c;并在相应的硬件和操作系统上执行。JVM的引入使得Java语言具有“一次编写&#xff0c;到处运行”的跨平台特性。本文将深入探…