纯css icons图标，只使用一个 i 标签，减少请求量

最新推荐文章于 2025-11-16 12:56:55 发布

原创最新推荐文章于 2025-11-16 12:56:55 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #icons #前端 #html5

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于CSS3实现的图标库，通过简单的引入CSS文件即可在手机端页面使用。文章提供了具体的使用方法及示例代码，并展示了当前可用的60个图标。

css-icons

github地址 CSS-ICONS

使用方法

直接引入css就可以，由于效果是css3实现，所以建议在手机端页面引用。

<link rel="stylesheet" href="icons.css">

例子

加上class

    <i class="css-icon-close-circle"></i>

就可以看到效果
这里写图片描述

目前有60个图标，还会继续添加更新…
点击页面图标就可以看到class名称

这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kai_l

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css自制icon图标（最简单的一种方式）

蚂蚁搬砖我砌墙

12-15

2860

目录下（根据自己的需求放，也可以放在 assets 目录下，笔者是放在 /static/images 目录下），如下是我自己从网上下载的喇叭图标，图片命名为。组件库，去官网查了一下发现并没有 el-icon-notice 类型的公告图标（但是在 vant 与 vux 等移动端组件库中是有的），于是想着。，其实自定义 icon 图标方式有好几种，但是笔者只使用了一种较为简单的方式，亲测有效，现分享给同行开发者们。从网上下载自己喜欢的图标或者自制一个 logo 图标，将其放于项目的。

easyui.css+icon.css

03-06

网页上各种按钮标签的样式，好东西值得你拥有。

参与评论您还未登录，请先登录后发表或查看评论

css-icons

weixin_34414650的博客

09-14

269

1. 关闭图标 <span class="close"></span> .close{ display: inline-block; width: 14px; height: 1px; background: #95835e; transform: rotate(45deg); -webkit-...

TailwindCSS Icons 项目常见问题解答

最新发布

gitblog_00062的博客

11-16

1087

TailwindCSS Icons 是一个集成到 Tailwind CSS 的插件，它允许用户从 Iconify 中引入超过 100,000 个图标，并在项目中方便地使用这些图标。该项目主要使用 JavaScript 进行编程，并依赖于其他图标集合库（如 @iconify/json）来提供丰富的图标资源。该插件通过简单的配置，可以使得开发者在 TailwindCSS 项目中快速地引用和使用各种图标

Icons.css 使用教程

gitblog_00813的博客

08-27

661

Icons.css 使用教程项目介绍 Icons.css 是一个轻量级的开源图标库，由 picturepan2 开发。该项目旨在提供一组简洁、现代的图标，适用于各种网页设计和开发需求。Icons.css 的特点包括：轻量级：文件体积小，加载速度快。简洁设计：图标风格现代，易于融入各种设计风格。易于使用：通过简单的 CSS 类即可调用图标。项目快速启动安装首先，通过 Git 克隆项...

icon.css

weixin_34115824的博客

07-13

252

.icon-blank{ background:url('icons/blank.gif') no-repeat; } .icon-add{ background:url('icons/edit_add.png') no-repeat; } .icon-edit{ background:url('icons/pencil.png') no-repeat; ...

纯css3手机页面图标样式代码

11-24

为了提高性能，我们还可以使用Sprite图技术，将多个图标合并到一个图片文件中，然后通过CSS定位显示单个图标，减少HTTP请求次数。最后，`texiao3482_1560929581`可能是一个包含示例代码或资源的文件，建议下载并...

轻量级纯CSS文件图标库的创建与使用

- 根据描述，`css-file-icons.css`文件是一个纯CSS图标库文件，它包含了一系列为流行文件扩展名设计的图标样式。 - 使用该CSS文件时，开发者可以通过简单地引入这个CSS文件，并将对应的类名添加到HTML元素中，即可...

UWP Icons：一个通用Windows平台图标CSS库

标题：“uwp-icons：一个CSS库，用于在网上使用通用Windows平台图标” 描述了“uwp-icons”是一个专门为Web开发者设计的CSS库，它让开发者能够轻易地在网上使用那些属于通用Windows平台（Universal Windows Platform...

icons.zip_icons_图标

09-24

可以使用CSS精灵（Sprite Sheets）或SVG图标来实现这一目标。 5. **无障碍性**：考虑到视力障碍或其他障碍的用户，图标应与辅助技术兼容，例如通过添加`aria-label`属性提供文本描述。 6. **响应式设计**：在移动...

logos-pure-css：使用纯CSS创建的公司徽标

02-05

综上所述，“logos-pure-css”项目提供了一个学习和实践使用纯CSS创建公司徽标的平台，它涵盖了从基础的CSS属性到高级技术的广泛知识，对于前端开发者来说，这是一个提升技能和创新思维的好资源。通过学习和实践这些...

css--icon图标

Aciel_的博客

06-22

1469

今天来学习引入icon图标,我们在浏览网页的时候可以看到网页的导航图标,方便我们一眼认出我们正在浏览的网页,那么这个图标是如何做到的呢?我们可以在浏览器中进入某个官网,直接在网址后加上 /favicon.ico ,点击进入即可获取logo图标,右键另存为即可获得logo图标了。1.首先做准备工作,先在某个官网中下载一张logo图片,用来作为我们制作的网页图标,将其命名为XXX.ico的形式。3.在.html文件中运行代码,你就可以得到一个拥有logo图标的网站了。如果你学到了的话,也赶快去试试吧!

【CSS3】用i标签用作小图标

ascu72892的博客

09-11

2244

首先在这里写一个昨天听张大神课程的时候，遇到一个问题，在这里写一下当position:absolute用在子标签当中时（父标签不使用position:relative），如果不设定子标签的位置，那么子标签就具有跟随性，父标签跑哪，子标签跟哪。但是当子标签中出现哪怕一个空格或极小的间距，这种跟随性就随之消失，就脱离父标签，此时我们的解决办法是用注释去空格<!-- --&g...

CSSIcon：纯CSS图标集

gitblog_00255的博客

11-12

459

CSSIcon 是一个开源项目，专注于使用纯CSS代码创建图标集。该项目的主要编程语言包括CSS、SCSS、HTML和JavaScript。通过这些语言的结合，CSSIcon 提供了一种无需依赖外部库或图像资源的图标解决方案。 ## 项目核心功能 CSSIcon 的核心功能是提供一组“即拿即用”的图标，这些图标完全由CSS代码构成。用户可以直接将这些CSS代码嵌入到自己的项目中，无需担心额外的...

推荐开源项目：CSSICON - 纯CSS代码实现的图标库

gitblog_00082的博客

05-11

564

在网页设计和开发中，图标扮演着至关重要的角色，它们使界面更具视觉吸引力并帮助用户理解功能。`cssicon` 是一个创新的开源项目，它提供了一套由纯CSS代码构建的图标集。这个项目完全不依赖任何外部库或框架，你只需“抓取并去用”，就能轻松地将这些图标整合到你的Web应用中。 ### 2、项目技术分析 `cssicon` 的核心理念是简洁与效率。每个图标都通过精心编写的CSS代码来呈现，利用了C...

CSS画icon图标系列（一）

思考是大脑的源代码，未经编译，却已运行一生。——调试自己，迭代世界。

11-05

2205

CSS是一种强大且灵活的样式语言，可以通过控制样式的各种属性来实现对网页的精确控制，使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标，灵活运用CSS中旋转，拉伸，扭曲裁剪，伪元素选择器，实现icon小图标。

前端必知必会-CSS图标icon

qq_24018193的博客

08-16

955

本文介绍了CSS图标icon的使用，如有问题欢迎私信和评论。

CSS图标ICO参考

天际线；世界的尽头；天涯海角 !

06-29

3518

@charset "UTF-8"; //Variables $fa-css-prefix: icon- !default; $fa-family-name: "FontAwesome" !default; $file-path: "../../fonts/fontawesome-webfont

纯css icons图标，只使用一个 i 标签

weixin_34347651的博客

11-26

950

css-icons github地址 CSS-ICONS 使用方法直接引入css就可以，由于效果是css3实现，所以建议在手机端页面引用。 <link rel="stylesheet" href="icons.css"> 例子加上class <i class="css-icon-close-circle"&g...