web前端学习笔记7-iconfont使用

news2024/12/23 10:53:45

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

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

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

相关文章

【Git管理工具】使用Docker+浪浪云服务器部署GitLab服务器

一、什么是GitLab 1.1.GitLab简介 GitLab 是一个开源的 DevOps 平台&#xff0c;它基于 Git 版本控制系统提供了从项目规划、源代码管理到持续集成、持续部署、监控和安全的完整生命周期管理。GitLab 是一个为开发者提供协作工作的工具&#xff0c;它使得团队能够高效地在同一…

海洋行业工业气体检测传感器的重要性

海洋行业是一个广阔而复杂的领域&#xff0c;涉及多个分支和应用&#xff0c;包括浮式生产、储存和卸载&#xff08;FPSO&#xff09;装置、渡轮和潜艇等。这些船舶和设施在执行任务时&#xff0c;都可能遇到各种潜在的气体危害。因此&#xff0c;对于海洋行业来说&#xff0c;…

Redis系列之key过期策略介绍

为什么要有过期策略&#xff1f; Redis是一个内存型的数据库&#xff0c;数据是放在内存里的&#xff0c;但是内存也是有大小的&#xff0c;所以&#xff0c;需要配置redis占用的最大内存&#xff0c;主要通过maxmemory配置 maxmomory <bytes> # redis占用的最大内存官…

python中一些莫名其妙的异常

目录 一、字符串中空格\xa0二、文件写入为空问题三、Counter对NAN空值的统计问题 一、字符串中空格\xa0 对于文本中的一些空格&#xff0c;原始状态时显示为普通“空格”&#xff08;其实是latin1编码字符&#xff09;&#xff0c;但是经过split()操作后&#xff0c;这些latin…

如何用道氏理论进行炒现货白银的技术分析?

要炒现货白银&#xff0c;就要对白银价格进行技术分析。进行炒白银的技术分析&#xff0c;目的是让投资者通过对白银价格图表的分析&#xff0c;判断白银市场趋势&#xff0c;进而寻找入场交易的机会。 道氏理论不光是一种技术分析的理论&#xff0c;它还被称为技术分析的鼻祖。…

【XR806开发板试用】阻塞式串口发送与接收教程

本文基于wsl2搭建的ubuntu18.04 vscode编辑器 很奇怪啊&#xff0c;找了半天居然没人发串口的教程&#xff0c;于是只能自己试一试了&#xff0c;在此发一个阻塞式的串口发送与接收的教程。并且&#xff0c;感谢.ACE彭洪权大佬在我配置环境遇到几十个报错的时候帮我远程搭建环…

H3C Private VLAN实验

Private VLAN 实验1 实验需求 按照图示配置 IP 地址 在 SW1 上配置 Private VLAN&#xff0c;Primary VLAN 为 Vlan30&#xff0c;Secondary VLAN 为 Vlan10 和 Vlan20 SW2 通过 Vlan100 下行连接 SW1&#xff0c;要求 PC3 和 PC4 都能以 Vlan100 访问 PC5 在 SW1 上配置 …

给网站网页PHP页面设置密码访问代码

将MkEncrypt.php文件上传至你网站根目录下或者同级目录下。 MkEncrypt.php里面添加代码&#xff0c;再将调用代码添加到你需要加密的页进行调用 MkEncrypt(‘123456’);括号里面123456修改成你需要设置的密码。 密码正确才能进去页面&#xff0c;进入后会存下cookies值&…

java接受入参是xml格式参数demo

java接受入参是xml格式参数demo 依赖demo1. xml入参定义2.接口定义3. postman请求4. 结果 注解说明 依赖 pom依赖 jackson-dataformat-xml <dependency><groupId>com.fasterxml.jackson.dataformat</groupId><artifactId>jackson-dataformat-xml</…

RCLAMP0854P.TCT ESD抑制器 静电和浪涌保护 应用领域

RCLAMP0854P.TCT 是一款电路保护器件&#xff0c;属于Transient Voltage Suppressor (TVS) 系列产品。它是一种低电容TVS阵列&#xff0c;具有 RailClamp 标志性技术&#xff0c;旨在为电子设备提供高效防护&#xff0c;免受高电压瞬变和静电放电&#xff08;ESD&#xff09;的…

uni-app 超详细教程( 附送250套精选项目源码)

一&#xff0c;uniapp 介绍 &#xff1a; 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;开发者编写一套代码&#xff0c;可发布到iOS、Android、Web&#xff08;响应式&#xff09;、以及各种小程序&#xff08;微信/支付宝/百度/头条/飞书/QQ/快手/…

信息泄露中的目录遍历,phpinfo,备份文件下载

一、目录遍历漏洞 1.什么是目录遍历漏洞 指的是在没有授权的情况下读取文件&#xff0c;某些情况下还可对服务器里的文件任意写入 2.目录遍历漏洞成因 网站配置存在缺陷&#xff0c;对输入目录缺少验证&#xff0c;没过滤../之类的目录跳转符&#xff0c;可通过提交目录跳转…

速卖通新卖家测评攻略:从入门到精通

在电商行业中&#xff0c;测评被广泛认为是提升产品转化率和销量的有效手段。对于速卖通的卖家而言&#xff0c;测评的必要性更是显而易见。测评&#xff0c;本质上与国内电商的补单行为相似&#xff0c;是一种通过增加销量来提升产品权重的方法。 特别是在竞争激烈的类目中&a…

【触摸案例-手势解锁案例-按钮高亮 Objective-C语言】

一、我们来说这个self.btns,这个问题啊,为什么不用_btns, 1.我们说,在懒加载里边儿,经常是写下划线啊,_btns,为什么不写,首先啊,这个layoutSubviews:我们第一次,肯定会去执行这个layoutSubviews: 然后呢,去懒加载这个数组, 然后呢,接下来啊,走这一句话, 第一次…

使用 Gitea 进行私有 Git 仓库管理

在本文中&#xff0c;我们将介绍如何使用 Gitea 搭建并管理私有 Git 仓库。Gitea 是一个轻量级的 Git 服务&#xff0c;提供了类似于 GitHub 的功能&#xff0c;适合个人和小团队使用。我们将通过以下步骤来完成搭建和配置 Gitea 服务器。 步骤一&#xff1a;安装 Gitea 首先…

关于Checkmarx、CodeQL和Semgrep的测试结果比较

关于Checkmarx、CodeQL和Semgrep的测试结果比较 随着SAST工具的不断的推陈出新&#xff0c;为了比较一些新的工具是否能够提供更好的扫描结果&#xff0c;针对Checkmarx、CodeQL以及Semgrep几个工具进行了测试评估&#xff0c;具体的评估结果仅供参考。本文列列举了工具的各个方…

SAP生产订单常用状态以及

常用系统状态&#xff1a; 状态 状态 CRTD 已建立 REL 已核发 CNF 已确认 PCNF 已部份确认 DLV 已交货 DLT 删除指示码 LKD 已锁住 TECO 技术完成 GMPS 已发料 关闭 关闭 工单结案前的生产报表分析 路径:后勤系统- 生产- 现场控制- 信息系统-订单信息系…

使用PyQt5设计系统登录界面—了解界面布局

前言&#xff1a;自学的过程中充分认识到网络搜索的重要性&#xff0c;有时候一篇通俗易懂的文章会让我这种入门级的小白更易上手&#xff0c;俗话说“开头难&#xff0c;难开头”&#xff0c;只要开了一个好头就不怕知难而退。 如何安装QT Designer界面设计所需要的环境 1. 如…

服务器数据恢复—ESXi虚拟机中MySQL数据库数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌EVA某型号存储中部署VMware ESXi虚拟化平台&#xff0c;数据盘&#xff08;精简模式&#xff09;快照数据盘&#xff0c;虚拟机中有mysql数据库。 服务器故障&#xff1a; 机房意外断电导致该存储中的一台VMware虚拟机无法启动&#xff0…

网络安全之动态路由入门

动态路由协议有几种&#xff1a;RIP,OSPF,EIGRP,ISIS,BGP 动态路由工作原理&#xff1a; 例如&#xff1a; 若A区域运行的协议与B中的不同&#xff0c;数据从1到4走A区域还是走B区域&#xff0c;则看A,B两区域的优先级&#xff08;priority preference或AD——管理距离&#…