字体图标的实现原理

article/2024/4/19 14:55:46

1.字体图标使用场景

主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的,但是缺点很明显。

  1. 图片文件还是比较大的。
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕想要更换非常复杂。
    此时,有一种技术的出现很好的解决了以上问题,就是字体图标 iconfont。
    字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。

2.使用步骤

字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为:

2.1.字体图标的下载

推荐下载网站:

  • icomoon 字库 http://icomoon.io 推荐指数 ★★★★★
    IcoMoon 成立于 2011 年,推出了第一个自定义图标字体生成器,它允许用户选择所需要的图标,使它们成一字型。该字库内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。
  • 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★
    这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用 AI
    制作图标上传生成。 重点是,免费

2.2. 字体图标的引入 (引入到我们html页面中)

下载完毕之后,注意原先的文件不要删,后面会用。

  1. 把下载包里面的 fonts 文件夹放入页面根目录下

在这里插入图片描述

  1. 在 CSS 样式中全局声明字体: 简单理解把这些字体文件通过css引入到我们页面中。
    一定注意字体文件路径的问题。
 @font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?ehh66j');src: url('fonts/icomoon.eot?ehh66j#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?ehh66j') format('truetype'),url('fonts/icomoon.woff?ehh66j') format('woff'),url('fonts/icomoon.svg?ehh66j#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}

3.复制Unicode编码在这里插入图片描述
在这里插入图片描述

3.字体图标的实现原理

写一个unicode就能展示成图标的原因是因为引入的font文件中有svg文件做渲染
在这里插入图片描述

4.字体图标的追加

如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection.json 从新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可

在这里插入图片描述


http://www.ngui.cc/article/show-861248.html

相关文章

11 |「哈希表」简析

前言 前言:刷「哈希表」高频面试题。 文章目录前言一、简介1、离散化1)什么是离散化2)离散化存储3)离散化映射2、哈希表1)什么是哈希表2)哈希表存储3)哈希函数4)哈希冲突二、参考链接…

C++入门:运算符

运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。C 内置了丰富的运算符,并提供了以下类型的运算符:算术运算符关系运算符逻辑运算符位运算符赋值运算符杂项运算符& :只有2个都为1,那么结果是1,否则为0&…

密钥格式梳理

文章目录各种密钥格式简介DERPyCryptodome源码参考PEMOpenSSL命令操作参考资料各种密钥格式简介 两种编码方式: .der:用ASN.1语法编码的der格式; .pem:用BASE64编码的密钥; # ASN.1 ------(序列化&…

【C++】对象与类

【C】对象与类 文章目录【C】对象与类1、定义1.1 对象的定义1.2 类的定义2、对象与类的创建2.1 类的创建2.2 对象的创建3、封装3.1 访问限定符3.2 对封装的解释4、类的实例化5、类、对象大小6、this指针6.1 this指针概念6.2 this指针特点1、定义 1.1 对象的定义 现实世界对对…

Spring Security 源码解读 :基本架构及初始化

Spring Security 是基于web的安全组件,所以一些相关类会分散在 spring-security包和web包中。Spring Security通过自定义Servlet的Filter的方式实现,具体架构可参考官网Spring Security: Architecture 这里使用Spring Boot 2.7.4版本,对应Sp…

MYSQL常用工具

1、字符串截取 substring(INDEX_NAME, 3, 2) -----------INDEX_NAME 2、String 转 Int CAST(INDEX_NAME AS SIGNED integer) ------------INDEX_NAME 3、时间格式化 date_format(INDEX_NAME, ‘%Y-%m-%d %H:%i:%s’) ----------------INDEX_NAME 4、IFNULL()、CASE-WHEN …

关于splitChunks的一次原理探索

前言 前端时间在做项目加载优化时用到了splitChunks自动拆包,后了解了一下原理写下了此文。 Modules和Chunks Modules简单来理解就是我们写的功能模块,不管是CommonJS还是ESM都算是一个Module,而Chunks则是webpack根据我们的规则/默认规则…

贝克制药冲刺上市:资产负债率高,抗乙肝制剂产品收入和占比下滑

2月3日,安徽贝克制药股份有限公司(下称“贝克制药”)在上海证券交易所递交招股书,准备在科创板上市,国元证券为其保荐机构。 本次冲刺上市,贝克制药计划募资14.20亿元,其中5.32亿元用于年产单方…

矿山安全生产监测预警系统 opencv

矿山安全生产监测预警系统通过pythonopencv网络模型计算机视觉技术,对现场画面中人的不安全行为”、“物的不安全状态”、“环境的不安全因素”三方面出发进行实时监测,当监测到现场画面中人员未穿反光衣行为、明火烟雾、未穿安全帽行为、矿车掉道识别、…

Mybatis一对多以及多对一

场景: 多个学生对应一个老师 如果对于学生这边,就是一个多对一的现象,即从学生这边关联一个老师! 数据库设计 CREATE TABLE teacher (id INT(10) NOT NULL,name VARCHAR(30) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEINNODB DEF…