当前位置： 首页 > news >正文

icomoon字体图标的使用

news 2025/7/3 18:40:40

很久之前就学习过iconfont图标的使用，今天又遇到一个用icomoon字体图标写的案例，于是详细学习了一下，现整理如下。

一、下载

1.网址：
https://icomoon.io/#home
2.点击IcoMoon App。
在这里插入图片描述
3.点击 https://icomoon.io/app

在这里插入图片描述
4.进入IcoMoon - Free界面，点击选择需要的图标，可以选择多个。
在这里插入图片描述

5.点击页面右下方“Generate Font”，生成字体。
在这里插入图片描述

6.点击页面右下方“Download”下载。在这里插入图片描述7.下载完成以后，会生成一个icomoon.zip压缩包，解压缩即可。

二、在网页中使用字体图标。

1.网页字体图标效果如下。
在这里插入图片描述
2.目录结构如下。
在这里插入图片描述
3.icomoon.css文件代码如下

/*下面代码是下载的示例css中生成的，因为路径有所改动，css文件放入css文件夹中，所以url中的路径由./改为../*/
@font-face {font-family: 'icomoon';src:  url('../fonts/icomoon.eot?7qyemc');src:  url('../fonts/icomoon.eot?7qyemc#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?7qyemc') format('truetype'),url('../fonts/icomoon.woff?7qyemc') format('woff'),url('../fonts/icomoon.svg?7qyemc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}[class^="icon-"], [class*=" icon-"] {/* 使用!important 防止浏览器扩展改变字体的问题*/font-family: 'icomoon' !important;speak: never;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* 字体渲染效果更好*/-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
span {font-size:32px;   /*1.改变字体图标的大小*/color:#339f63;     /*2.改变字体图标的颜色*/margin-bottom: 10px; 
}
.icon-connection:before {content: "\e91b";
}
.icon-bubbles:before {content: "\e96c";
}
.icon-link:before {content: "\e9cb";
}
.icon-play2:before {content: "\ea15";
}
.icon-arrow-up2:before {content: "\ea3a";
}
.icon-circle-up:before {content: "\ea41";
}
.icon-circle-right:before {content: "\ea42";
}
.icon-circle-left:before {content: "\ea44";
}
.icon-rss2:before {content: "\ea9c";
}
.icon-android:before {content: "\eac0";
}

4.icomoon_demo.html文件，使用span标记，加对应的类名就可以。

<!doctype html>
<html><head><meta charset="utf-8"><title>IcoMoon Demo</title><meta name="description" content="An Icon Font Generated By IcoMoon.io"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./css/icomoon.css"></head><body><span class="icon-connection"></span><span class="icon-bubbles"></span><span class="icon-link"></span><span class="icon-play2"></span><span class="icon-arrow-up2"></span><span class="icon-circle-up"></span><span class="icon-circle-left"></span><span class="icon-circle-right"></span><span class="icon-android"></span><span class="icon-rss2"></span></body>
</html>

5.注意：选择的图标不同，fonts文件夹中每次生成的.eot,.svg等文件会不同,如果要用到新的图标，需要重新到官网选择需要的图标重新生成，重新下载。

三、使用场景举例

很多网站的导航栏都有一个倒三角，表示此处有下拉菜单，如图所示是淘宝网的“联系客服”菜单项。

1.文件目录结构如下。
在这里插入图片描述

2.本例中，没有使用单独的 css文件，css代码放在html文件中，url的路径和上例中不同。另外本例中还使用了::after伪元素，具体代码如下。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>伪元素选择器-字体图标倒三角</title><style>* {margin: 0;padding: 0;}body {background-color: #eee;}ul,li {list-style: none;}a{text-decoration: none;color:#333;}@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}#service {position: relative;    				/*父相*/width: 105px;height: 35px;line-height: 35px;margin: 20px 100px;box-sizing: border-box;padding-left: 10px;}#service::after {position: absolute;            /*绝对定位*/top: 0px;                     /*定义字体图标的位置-水平方向*/right: 10px;                    /*定义字体图标的位置-垂直方向*/font-family: 'icomoon';   		/*使用icomoon字体*/content: '\e91e';     			/*字体图标编号*/color: #ccc;                    /*字体图标颜色*/font-size: 20px;                /*字体图标大小*/}#service ul {position: absolute;   				/*子绝*/left: 0;top: 35px;visibility: hidden;}#service li{padding: 0 10px;}#service:hover {background-color: #fff;}#service:hover ul {visibility: visible;background-color: #fff;}#service li:hover{background-color: #ccc;}</style></head><body><div id="service">联系客服<ul><li><a href="#">消费者客服</a></li><li><a href="#">卖家客服</a></li>			<li><a href="#">意见反馈</a></li>			<li><a href="#">网页版旺旺</a></li></ul></div></body>
</html>

相关文章：

icomoon字体图标的使用

很久之前就学习过iconfont图标的使用&#xff0c;今天又遇到一个用icomoon字体图标写的案例&#xff0c;于是详细学习了一下&#xff0c;现整理如下。 一、下载 1.网址&#xff1a; https://icomoon.io/#home 2.点击IcoMoon App。 3.点击 https://icomoon.io/app 4.进入IcoM…...

编程日记 2023/2/10 20:33:38

Java · 常量介绍 · 变量类型转换 · 理解数值提升 · int 和 Stirng 之间的相互转换

书接上回 Java 变量介绍 我们继续学习以下内容. 四、常量字面值常量final 关键字修饰的常量五、理解类型转换int 和 long/double 相互赋值int 和 boolean 相互赋值int 字面值常量给 byte 赋值强制类型转换类型转换小结六、理解数值提升int 和 long 混合运算byte 和 byte 的运算…...

编程日记 2023/2/10 20:32:27

JVM从跨平台到跨专业 Ⅲ -- 类加载与字节码技术【下】

文章目录编译期处理默认构造器自动拆装箱泛型集合取值可变参数foreach 循环switch 字符串switch 枚举枚举类try-with-resources方法重写时的桥接方法匿名内部类类加载阶段加载链接初始化相关练习和应用类加载器类与类加载器启动类加载器拓展类加载器双亲委派模式自定义类加载器…...

编程日记 2023/2/10 20:31:19

ucore的字符输出

ucore的字符输出有cga,lpt,和串口。qemu模拟出来显示器连接到cga中。 cga cga的介绍网站&#xff1a;https://en.wikipedia.org/wiki/Color_Graphics_Adapter cga是显示卡&#xff0c;内部有个叫6845的芯片。cga卡把屏幕划分成一个一个单元格&#xff0c;每个单元格显示一个a…...

编程日记 2023/2/10 20:30:13

【ESP 保姆级教程】玩转emqx数据集成篇① ——认识数据集成

忘记过去，超越自己 ❤️ 博客主页 单片机菜鸟哥，一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-02-10 ❤️❤️ 本篇更新记录 2023-02-10 ❤️🎉 欢迎关注 🔎点赞 👍收藏 ⭐️留言📝🙏 此博客均由博主单独编写，不存在任何商业团队运营，如发现错误，请…...

编程日记 2023/2/10 20:29:07

PMP报考条件？

PMP已经被认为是项目管理专业身份的象征&#xff0c;项目经理人取得的重要资质。 PMP考试一般每年在中国大陆地区&#xff0c;会进行四次考试&#xff0c;今天就来详细说一说PMP考试的时间线。 01考试时间PMP考试在中国大陆一年开展四次&#xff0c;分别在每年的3月、6月、9月…...

编程日记 2023/2/10 20:28:01

Vite+Vue3实现版本更新检查，实现页面自动刷新

ViteVue3实现版本更新检查&#xff0c;实现页面自动刷新1、使用Vite插件打包自动生成版本信息2、Vite.config.ts配置3、配置环境变量4、路由配置现有一个需求就是实现管理系统的版本发版&#xff0c;网页实现自动刷新页面获取最新版本 搜索了一下&#xff0c;轮询的方案有点浪费…...

编程日记 2023/2/10 20:26:53

LeetCode刷题模版：292、295、297、299-301、303、304、309、310

目录 简介292. Nim 游戏295. 数据流的中位数297. 二叉树的序列化与反序列化【未理解】299. 猜数字游戏300. 最长递增子序列301. 删除无效的括号【未理解】303. 区域和检索 - 数组不可变304. 二维区域和检索 - 矩阵不可变309. 最佳买卖股票时机含冷冻期310. 最小高度树【未理解】…...

编程日记 2023/2/10 20:25:49

20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位&#xff0c;代表像素&#xff0c;可以确保元素的大小不受屏幕分辨率的影响。 % (percentage) 是相对单位&#xff0c;代表元素大小相对于其父元素或视口&#xff08;viewport&#xff09;的大小的百分比。使用百分比可…...

编程日记 2023/2/10 20:24:43

第五节 字符设备驱动——点亮LED 灯

通过字符设备章节的学习&#xff0c;我们已经了解了字符设备驱动程序的基本框架&#xff0c;主要是掌握如何申请及释放设备号、添加以及注销设备&#xff0c;初始化、添加与删除cdev 结构体&#xff0c;并通过cdev_init 函数建立cdev 和file_operations 之间的关联&#xff0c;…...

编程日记 2023/2/10 20:23:34

浅谈小程序开源业务架构建设之路

一、业务介绍 1.1 小程序开源整体介绍 百度从做智能小程序的第一天开始就打造真正开源开放的生态&#xff0c;我们的愿景是&#xff1a;定义移动时代最佳体验&#xff0c;建设智能小程序行业标准&#xff0c;打破孤岛&#xff0c;共建开源、开放、繁荣的小程序行业生态。百度…...

编程日记 2023/2/10 20:22:28

git、gitee、github关系梳理及ssh不对称加密大白话解释

温馨提示&#xff1a;本文不会讲解如何下载、安装git&#xff0c;也不会讲解如何注册、使用gitee或GitHub&#xff0c;这些内容网上一大把&#xff0c;B站上的入门课程也很多&#xff0c;自己看看就好了。 本文仅对 git、gitee、github的关系梳理及ssh公钥私钥授权原理用白话讲…...

编程日记 2023/2/10 20:21:22

UDP协议详解

目录 前言&#xff1a; 再谈协议 UDP协议 比较知名的校验和 小结&#xff1a; 前言&#xff1a; UDP和TCP作为传输层非常知名的两个协议&#xff0c;那么将数据从应用层到传输层数据是怎样进行打包的&#xff1f;具体都会增加一些什么样的报头&#xff0c;下面内容详细介绍…...

编程日记 2023/2/10 20:20:18

Myb atis基础3

Mybatis注解开发单表操作Mybatis的常用注解Mybatis的增删改查MyBatis注解开发的多表操作MyBatis的注解实现复杂映射开发一对一查询一对多查询多对多查询构建sqlsql构建对象介绍查询功能的实现新增功能的实现修改功能的实现删除功能的实现Mybatis注解开发单表操作 Mybatis的常用…...

编程日记 2023/2/10 20:19:13

VHDL语言基础-时序逻辑电路-寄存器

目录 寄存器的设计&#xff1a; 多位寄存器&#xff1a; 多位寄存器的VHDL描述: 移位寄存器&#xff1a; 串进并出的移位寄存器的VHDL描述: 寄存器的设计&#xff1a; 多位寄存器&#xff1a; 一个D触发器就是一位寄存器&#xff0c;如果需要多位寄存器&…...

编程日记 2023/2/10 20:18:06

高通开发系列 - linux kernel更新msm-3.18升至msm-4.9

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 目录 linux kernel更新msm-3.18升至msm-4.9第一周处理的内容：第二周处理的内容第三周处理的内容linux kernel更新msm-3.18升至msm-4.9 第…...

编程日记 2023/2/10 20:17:00

【Tensorflow2.0】tensorflow中的Dense函数解析

目录1 作用2 例子3 与torch.nn.Linear的区别4 参考文献1 作用 注意此处Tensorflow版本是2.0。 由于本人是Pytorch用户&#xff0c;对Tensorflow不是很熟悉&#xff0c;在读到用tf写的代码时就很是麻烦。如图所示&#xff0c;遇到了如下代码&#xff1a; h Dense(unitsadj_di…...

编程日记 2023/2/10 20:15:54

PyTorch学习笔记：data.RandomSampler——数据随机采样

PyTorch学习笔记&#xff1a;data.RandomSampler——数据随机采样 torch.utils.data.RandomSampler(data_source, replacementFalse, num_samplesNone, generatorNone)功能&#xff1a;随即对样本进行采样 输入&#xff1a; data_source&#xff1a;被采样的数据集合replace…...

编程日记 2023/2/10 20:14:49

设计模式(七)----创建型模式之建造者模式

1、概述 将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 分离了部件的构造(由Builder来负责)和装配(由Director负责)。 从而可以构造出复杂的对象。这个模式适用于&#xff1a;某个对象的构建过程复杂的情况。 由于实现了构建和装配的解…...

编程日记 2023/2/10 20:13:43

DCGAN

DCGAN的论文地址[https://arxiv.org/pdf/1511.06434.pdf]。DCGAN是GAN的一个变体&#xff0c;DCGAN就是将CNN和原始的GAN结合到一起&#xff0c;生成网络和鉴别网络都运用到了深度卷积神经网络。DCGAN提高了基础GAN的稳定性和生成结果质量。DCGAN主要是在网络架构上改进了原始的…...

编程日记 2023/2/10 20:12:36

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/2 5:34:47

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/7/1 15:43:18

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/6/21 9:41:59

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/6/26 22:25:56

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/6/21 7:18:42

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/6/16 18:42:13

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/6/21 4:03:48

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/7/1 18:37:49

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2025/7/1 6:29:09