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

2016-11-28 09:39:15 +08:00
 kai1992

css-icons

github 地址 CSS-ICONS

使用方法

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

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

例子

加上 class

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

就可以看到效果

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

2608 次点击
所在节点    前端开发
13 条回复
yangg
2016-11-28 09:49:34 +08:00
至少单位用 em 吧。
swift
2016-11-28 09:58:05 +08:00
iconfont 才是正道，矢量图，颜色，大小随便设置
SourceMan
2016-11-28 09:59:55 +08:00
减少请求量已经是上个前端时代的优化需求了。
SourceMan
2016-11-28 10:01:05 +08:00
哈哈哈，来了应景的 bug
kai1992
2016-11-28 10:27:59 +08:00
@yangg 有道理
kai1992
2016-11-28 10:28:09 +08:00
@swift 有道理
kai1992
2016-11-28 10:28:23 +08:00
@SourceMan 好吧
xxxyyy
2016-11-28 10:30:39 +08:00
@swift svg 才是正道
learnshare
2016-11-28 11:56:21 +08:00
css 绘图只是玩玩，真搞起来太费时间
Kilerd
2016-11-28 12:55:05 +08:00
@learnshare 主要是消耗渲染时间。
learnshare
2016-11-28 13:37:23 +08:00
@Kilerd 是写起来费时间，性能上不是问题
kai1992
2016-11-28 14:13:19 +08:00
@learnshare 所以慢慢积累起来，就方便了
learnshare
2016-11-28 14:36:53 +08:00
@kai1992 总不如 AI/Sketch 搞一搞，做成 字体 /SVG 来得方便

闲事用 CSS 画一画倒也是一种乐趣

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/323742

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX