iconfont图标字体库详细介绍

2024-09-04 10:44

本文主要是介绍iconfont图标字体库详细介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

概述

图标库在前端开发中应用十分广泛,图标库不仅会丰富美化界面的展示,语义化的图标库更能简洁明了地向用户传达某些信息,比如功能的特性和作用,引导用户,极大提高系统的易用性。在没有 UI 设计师的情况下,作为开发也可以自己打造图标库。而iconfont就是一种很好的选择。

iconfont

iconfont 介绍

iconfont是一个图标字体库,它允许用户将各种图标作为字体进行使用,十分方便地在网页和应用中展示图标。

iconfont 的特点
  • 图标字体:将图标作为字体使用,便于调整大小、颜色和样式,且不失真。
  • 自定义:用户可以上传自定义图标,生成自己的图标库。
  • SVG 支持:提供 SVG 格式图标,支持更高质量的图标显示。
  • 跨平台:兼容多种平台和浏览器,确保图标显示一致。
  • 便捷集成:通过 CSS 或 JavaScript 引入图标,简单易用

iconfont 使用步骤

iconfont的使用和管理也十分方便,使用前提是需要在其官方网站:iconfont 网站上注册一个账号并登录。主要步骤分为 1.制作图标字体库 2.使用图标字体库。

制作图标库

制作图标库过程如下

  • 打开网站 ——> 资源管理,先建一个项目,比如我的项目名称叫做 openlayers
    在这里插入图片描述
    在这里插入图片描述

  • 可以直接上传本地图片作为图标,也可以去进行搜索,比如搜索 CO2
    在这里插入图片描述

  • 在搜索结果页面,将想要的图标 添加到购物车

在这里插入图片描述
在这里插入图片描述

  • 这样就可以在 openlayers 项目看到港添加的新图标

在这里插入图片描述

使用图标库

iconfont的图标可以单个使用,也可以批量应用到项目中。批量应用又分三种方式:1.unicode 引用 2.font-class 引用 3.symbol 引用。这里以第三种方式为例。

使用前,从上面最后一张中可以看出,通过切换三种方式,在不同的方式下每个图标的名字都不一样,我们根据需要可以编辑每个图标的名称或者className
使用时,需要下载文件到本地,并在项目中引入即可。
在这里插入图片描述

使用步骤如下:

  • 引入下载文件中的iconfont.js文件
  • 设置 svg 的样式
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
  • 在 html 中写如下代码
<svg class="icon svg-icon" aria-hidden="true"><use xlink:href="#icon-a-tree"></use>
</svg>
效果如下

在这里插入图片描述

iconfont 的原理

上面采用的第三种方式,和字体编码关系不大。引入的iconfont.js中代码比较好理解,主要就干了两件事 1.定义全局变量window._iconfont_svg_string_xxxxxx,该变量是一串 svg 代码,包含项目中每个图标的symbol 2.使用IIFE的模式将该 svg 字符串插入到 DOM 中去。

在这里插入图片描述

核心代码如下:

((e) => {var t = (a = (a = document.getElementsByTagName("script"))[a.length - 1]).getAttribute("data-injectcss"),a = a.getAttribute("data-disable-injectsvg");if (!a) {var l,i,c,n,o,h = function (t, a) {a.parentNode.insertBefore(t, a);};if (t && !e.__iconfont__svg__cssinject__) {e.__iconfont__svg__cssinject__ = !0;try {document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>");} catch (t) {console && console.log(t);}}(l = function () {var t,a = document.createElement("div");(a.innerHTML = e._iconfont_svg_string_4550938),(a = a.getElementsByTagName("svg")[0]) &&(a.setAttribute("aria-hidden", "true"),(a.style.position = "absolute"),(a.style.width = 0),(a.style.height = 0),(a.style.overflow = "hidden"),(a = a),(t = document.body).firstChild? h(a, t.firstChild): t.appendChild(a));}),document.addEventListener? ~["complete", "loaded", "interactive"].indexOf(document.readyState)? setTimeout(l, 0): ((i = function () {document.removeEventListener("DOMContentLoaded", i, !1), l();}),document.addEventListener("DOMContentLoaded", i, !1)): document.attachEvent &&((c = l),(n = e.document),(o = !1),s(),(n.onreadystatechange = function () {"complete" == n.readyState && ((n.onreadystatechange = null), d());}));}function d() {o || ((o = !0), c());}function s() {try {n.documentElement.doScroll("left");} catch (t) {return void setTimeout(s, 50);}d();}
})(window);

这篇关于iconfont图标字体库详细介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1135802

相关文章

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

Linux系统中配置静态IP地址的详细步骤

《Linux系统中配置静态IP地址的详细步骤》本文详细介绍了在Linux系统中配置静态IP地址的五个步骤,包括打开终端、编辑网络配置文件、配置IP地址、保存并重启网络服务,这对于系统管理员和新手都极具... 目录步骤一:打开终端步骤二:编辑网络配置文件步骤三:配置静态IP地址步骤四:保存并关闭文件步骤五:重

Centos环境下Tomcat虚拟主机配置详细教程

《Centos环境下Tomcat虚拟主机配置详细教程》这篇文章主要讲的是在CentOS系统上,如何一步步配置Tomcat的虚拟主机,内容很简单,从目录准备到配置文件修改,再到重启和测试,手把手带你搞定... 目录1. 准备虚拟主机的目录和内容创建目录添加测试文件2. 修改 Tomcat 的 server.X

C++快速排序超详细讲解

《C++快速排序超详细讲解》快速排序是一种高效的排序算法,通过分治法将数组划分为两部分,递归排序,直到整个数组有序,通过代码解析和示例,详细解释了快速排序的工作原理和实现过程,需要的朋友可以参考下... 目录一、快速排序原理二、快速排序标准代码三、代码解析四、使用while循环的快速排序1.代码代码1.由快

Spring Boot拦截器Interceptor与过滤器Filter详细教程(示例详解)

《SpringBoot拦截器Interceptor与过滤器Filter详细教程(示例详解)》本文详细介绍了SpringBoot中的拦截器(Interceptor)和过滤器(Filter),包括它们的... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)详细教程1. 概述1

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom