icon 的各种实现方式
2017-07-12 本文已影响239人
_空空
icon 的各种实现方式
- 需求：一个页面上有很多个小图标
- 实现方式：
- image
- CSS Sprites
- Icon Font
- CSS Icon
- SVG（目前来看，是最完美的）
使用 image 实现
- 注意事项：
- img 的大小设置
- 可以只设置宽度／高度，图片会自适应缩放
- img 的 vertical-align
- 请求数过多
- 因为每一个请求都是需要花时间去建立的，HTTP 1.1 时代，客户端（浏览器）是慢的，但如果升级到了 HTTP 2，100个请求跟1个请求是差不了多少的
- 在服务器端（server），比如是用 php、java 实现的后端，请求过多，一般会导致线程过多，或大或小都会产生一定的压力
- 另外，请求过多，对网站流量也会有一定的影响，流量要要花钱的
- img 的大小设置
CSS Sprites（CSS 精灵图）
- 最开始我们是 人肉拼 Sprites
- 现在可以使用命令行
- google：npm css sprites，可以找到 sprity。通过文档中的 sprity-cli 来查看如何在命令行中使用它
- 安装完成后，比如使用命令
sprity create build resource/*.png -s style.css。这里意思是将 resource 目录下的 png 格式图片生成 scripts 以及 名为style.css的文件，并放在 build 目录下。这样我们就可以在代码中直接引用了，直接加上对应的 icon 类名即可
- 或使用在线工具：（google：css sprites generator）
- 图片合并及生成 stylesheet：CSS Sprite Generator
- 图片合并：CSS Sprites Generator
- 缺点：
- 无法缩放
- 不好修改
Icon Font 把字体做成图标
- 制作字体文件
- 可以通过 iconfont 来制作
- 声明 font-family
@font-face- 使用本地链接
- 或者使用第三方链接
- 使用 font-familt
- 使用 HTML 实体字符，写在标签里面（所有浏览器都兼容）
- 或使用 CSS
:before（IE7-不支持） —— CSS Entities
<style type="text/css">
span:before {
content: "\00A9";
}
</style>
</head>
<body>
<span>©</span>
</body>
- 示例代码
- 参考：聊一聊字体图标的实现原理
CSS icon 用 CSS 画
- CSS 能画圆，能画方，为什么不能画 icon？
- 参考网站：CSS ICON
- 兼容性：IE支持不太好，比如
border-radiusIE8-不支持
SVG
- svg 可以作为图像的地址直接传入：
<\img src="svg">，但是这样依然会造成请求数过多 - 还可以使用 SVG "sprites"
- google：npm svg sprites，看排名靠前的，比如 svg-sprite
- 它是以标签的形式来组织所有的图片的，移动端首选
- 优点：可以方便的修改 icon 的大小、颜色，缩放没有锯齿
