No.25 CSS--字体图标

news/2025/2/28 11:31:11/文章来源:https://www.cnblogs.com/bltstop/p/18742877

一、字体图标

  • 我们会经常用到一些图标,但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢。所以,我们可以使用字体图标的方式来显示图标,既解决了失真的问题,也解决了图片占用资源的问题。

1.常用的字体图标库

  • 阿里字体图标库:https://www.iconfont.cn/

2.优点

  • 轻量性:加载速度快,减少http请求
  • 灵活性:可以利用CSS设置大小颜色等
  • 兼容性:网页字体支持所有现代浏览器,包括IE低版本

3.使用字体图标

  • 登录注册:https://www.iconfont.cn/
  • 搜索图标
  • 添加到购物车
  • 下载代码
  • 解压,打卡demo...
  • 通过font-class引用
  •  

     

  •  

     

     

     

 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅谈Tox之二

本文分享自天翼云开发者社区《浅谈Tox之二》,作者:Moonriver1. 配置 加载tox.ini并将其与命令行和操作系统环境变量中的选项合并。 2. 包装(可选) 通过调用python setup.py sdist创建当前项目的源代码版本库。 注意对于此操作,Python环境将与安装tox时的相同(因此需要确保…

重塑团队协作:从混乱到高效的团队管理工具指南

设计团队管理工具是一个复杂但至关重要的任务,它要求工具能够满足团队在项目管理、协作、沟通、资源分配和进度跟踪等方面的需求。以下是一些设计团队管理工具时应考虑的关键因素以及推荐的团队管理工具: 设计团队管理工具的关键因素 ● 明确目标与角色分工:工具应支持将团队…

TCP IP 网络协议基础

TCP IP 简介可见 TCP/IP 被分为 4 层,每层承担的任务不一样,各层的协议的工作方式也不一样,每层封装上层数据的方式也不一样:应用层:应用程序通过这一层访问网络,常见 FTP、HTTP、DNS 和 TELNET 协议; 传输层:TCP 协议和 UDP 协议; 网络层:IP 协议,ARP、RARP 协议,…

机械图纸文章标题搜索增强实现过程

机械图纸文章标题搜索增强实现过程 1. 为什么需要使用搜索增强技术机械图纸标题搜索的挑战:机械图纸标题通常包含专业术语、缩写和特定格式(如“土豆分拣机 DWG-001 不锈钢”)。 用户查询可能模糊或表述不同(如“马铃薯筛选机”),传统搜索难以匹配语义相似的标题。 标题信…

煎熬中的二代基因测序

提到基因测序,绝大多数人第一印象就是二代测序。的确,一代Sanger测序弊端太多,三代单分子测序和四代纳米孔测序(生物纳米孔和固态纳米孔)刚刚崭露头角,且有一些问题仍待解决(比如微电流信号精准捕捉、1-3nm原子级纳米孔开孔等)。综合来看,一代Sanger如英雄迟暮、三四代…

智能驾驶辅助系统ADAS

经纬恒润将更高性能的800W像素摄像头、先进的视觉EQ6方案、成熟的控制算法进行了优势组合,推出了全新一代的前视单目摄像头解决方案。经纬恒润智能驾驶辅助系统ADAS新方案旨在更好的应对市场ADAS性能提升与成本压力的博弈,寻找L2+自动驾驶功能升级的最优解。 随着L2+自…

基于 Trae Claude-3.7 从0到1 打造加密货币钱包Dompet-App

从0到1:用Trae Claude-3.7打造加密货币钱包Dompet-App📱 项目介绍 大家好!今天我要分享如何使用强大的AI助手Trae Claude-3.7,从零开始构建一款功能丰富的加密货币钱包应用——Dompet-App。无论你是区块链爱好者还是移动开发新手,这个项目都能让你快速掌握React Native开…

国产化FMC接口通用计算平台设计原理图:2367-基于FMQL45T900 FMC接口通用计算平台

一、板卡概述 板卡由 FMQL45T900I芯片来完成卡主控及数字信号处理, FMQL45T900内部集成了两个ARM Cortex-A9核和一个kintex 7的FPGA,通过PL端FPGA扩展FMC、光纤、IO等接口,PS端ARM扩展网络、USB、RS232等接口。板卡适应于图像处理、震动、通信、雷达等前端信号处理或者手持机…

.NET 10 首个预览版发布,跨平台开发与性能全面提升

前言 2024年2月25日,微软正式推出 .NET 10 预览版 1,标志着这一跨平台开发框架迈入新里程碑。 本次更新聚焦 JIT 编译器优化、运行时性能提升和跨平台开发体验增强,同时引入多项开发者期待的功能改进。 无论是服务端应用、移动开发,还是桌面程序,.NET 10 都展现了强大的技…

uniapp app端弹窗提示 代码块

前提:uniapp的app端,用uni自带的toast,icon会自占一行,很丑 如图: 利用 plus.nativeUI.toast 显示正常大小的iconplus.nativeUI.toast(e,{type: text,duration: short,style: "inline",align: center,verticalAlign: center,icon: "/static/images/icon/su…

极验4

极验4demo aHR0cHM6Ly9ndDQuZ2VldGVzdC5jb20v 本文章中所有内容仅供学习交流使用,不用于其他任何目的,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 第一个接口逆向参数搜索captcha_id可以找到生成位置,可以看到challenge就是一个uuid继续搜索captcha…